كيفية تفعيل الأزرار الدائرية المعطلة: دليل خطوة بخطوة
عند العمل مع نماذج الويب، من الشائع مواجهة سيناريوهات تحتاج فيها إلى تفعيل أو تعطيل حقول الإدخال ديناميكيًا بناءً على تفاعلات المستخدم. إحدى هذه الحالات تتضمن الأزرار الدائرية التي يجب تفعيلها أو تعطيلها بناءً على الاختيار المتم في قائمة منسدلة. إذا واجهت مشاكل في الاتساق عبر متصفحات مختلفة، خاصة بين إنترنت إكسبلورر وغيرها مثل فايرفوكس (FF) أو سفاري، فأنت لست وحدك. سيقوم هذا المنشور الإرشادي بتوجيهك نحو حل يضمن أن تكون الأزرار الدائرية لديك تعمل بشكل صحيح، بغض النظر عن المتصفح المستخدم.
المشكلة
في الشيفرة الأصلية، يهدف تصميم الأزرار الدائرية إلى أن تكون معطلة أو مفعلة عندما يختار المستخدم خيارًا من قائمة منسدلة. بينما يعمل هذا الوظيفة بسلاسة على إنترنت إكسبلورر، إلا أنها تعاني في متصفحات أخرى مثل فايرفوكس وسفاري—خاصة عندما يتنقل المستخدمون باستخدام لوحة المفاتيح بدلاً من الفأرة. يتم تفعيل أو تعطيل الأزرار الدائرية فقط بعد نقرة إضافية في مكان آخر على الصفحة. يمكن أن يؤدي هذا السلوك غير المتوقع إلى ارتباك المستخدمين.
مثال على الشيفرة
إليك نسخة مبسطة من الشيفرة الأولية التي قد تجدها عادة:
<form name="frm" action="coopfunds_transfer_request.asp" method="post">
<select name="user" onchange="javascript: SetLocationOptions()">
<option value="">اختر واحدًا</option>
<option value="58" user_is_tsm="0">تفعيل كلا الزرين الدائريين</option>
<option value="157" user_is_tsm="1">تعطيل زرَي التبديل</option>
</select>
<br/><br/>
<input type="radio" name="transfer_to" value="fund_amount1" />ممتاز
<input type="radio" name="transfer_to" value="fund_amount2" />آخر
<input type="radio" name="transfer_to" value="both" CHECKED />كلاهما
<br/><br/>
<input type="button" class="buttonStyle" value="إرسال الطلب" />
</form>
الحل
لمعالجة عدم الاتساق وتحسين توافق المتصفحات، يمكننا تحسين عنصر select
للاستجابة أيضًا لأحداث لوحة المفاتيح. بشكل خاص، يسمح إضافة معالج حدث keyup
للشيفرة بالتشغيل ليس فقط عندما تتغير القائمة المنسدلة من خلال الفأرة، ولكن أيضًا عندما يتم التنقل باستخدام لوحة المفاتيح.
الشيفرة المحدثة
إليك كيفية تنفيذ التغييرات اللازمة:
- إضافة حدث
onkeyup
: سيقوم هذا باستدعاء دالةSetLocationOptions
كلما ترك المستخدم مفتاحًا بعد التفاعل مع صندوقselect
.
<select name="user" id="selUser" onchange="SetLocationOptions()" onkeyup="SetLocationOptions()">
الدالة الكاملة لجافاسكريبت
للسياق، إليك الدالة الكاملة SetLocationOptions
جنبًا إلى جنب مع HTML المحدث:
function SetLocationOptions() {
var frmTemp = document.frm;
var selTemp = frmTemp.user;
// تحقق من فهرس الخيار المحدد
if (selTemp.selectedIndex >= 0) {
var myOpt = selTemp.options[selTemp.selectedIndex];
if (myOpt.attributes[0].nodeValue == '1') {
frmTemp.transfer_to[0].disabled = true;
frmTemp.transfer_to[1].disabled = true;
frmTemp.transfer_to[2].checked = true;
} else {
frmTemp.transfer_to[0].disabled = false;
frmTemp.transfer_to[1].disabled = false;
}
}
}
<form name="frm" action="coopfunds_transfer_request.asp" method="post">
<select name="user" id="selUser" onchange="SetLocationOptions()" onkeyup="SetLocationOptions()">
<option value="">اختر واحدًا</option>
<option value="58" user_is_tsm="0">تفعيل كلا الزرين الدائريين</option>
<option value="157" user_is_tsm="1">تعطيل زرَي التبديل</option>
</select>
<br/><br/>
<input type="radio" name="transfer_to" value="fund_amount1" />ممتاز
<input type="radio" name="transfer_to" value="fund_amount2" />آخر
<input type="radio" name="transfer_to" value="both" CHECKED />كلاهما
<br/><br/>
<input type="button" class="buttonStyle" value="إرسال الطلب" />
</form>
الخاتمة
من خلال تنفيذ معالج الحدث onkeyup
، يمكنك التأكد من أن الأزرار الدائرية لديك مفعلة أو معطلة بشكل صحيح، بغض النظر عما إذا كان المستخدم يتفاعل مع القائمة المنسدلة عبر الفأرة أو لوحة المفاتيح. يمكن أن تعزز هذه التعديلات الصغيرة تجربة المستخدم بشكل ملحوظ وتوفر نموذج تفاعل متسق عبر متصفحات الويب المختلفة.
لا تتردد في اختبار هذا المثال المحدث في بيئتك والاستمتاع بتجربة مستخدم أكثر سلاسة وموثوقية!