كيفية جعل مربع نص غير نشط باستخدام كس وجافا سكريبت-نصائح وأمثلة

غالبا ما يكون من الضروري جعل حقل الإدخال على صفحة الويب غير نشط للمستخدم. يمكن أن يكون هذا مفيدا ، على سبيل المثال ، عندما تحتاج إلى منع تحرير بيانات معينة أو حظر الإدخال في حقل حتى يتم استيفاء شرط معين. في هذه المقالة ، سوف ننظر في طرق مختلفة لجعل مربع النص غير نشط باستخدام كس وجافا سكريبت.

واحدة من أسهل الطرق هي استخدام خاصية كس "مؤشر الأحداث". من خلال تعيين قيمته على "لا شيء" لحقل النص ، نجعله لا يستجيب لأي إجراءات مستخدم ، بما في ذلك النقرات والتحويم والسحب. هنا مثال على التعليمات البرمجية:

لتطبيق هذا النمط ، يكفي تعيين فئة" معطل " إلى عنصر الإدخال:

وسوف يصبح حقل الإدخال غير نشط! ومع ذلك ، يجب أن نتذكر أن هذه الطريقة لا تمنع التركيز على العنصر ولا تستبعد إمكانية إرسال البيانات باستخدام لوحة المفاتيح.

1. كيفية جعل مربع نص غير نشط باستخدام كس وجافا سكريبت
2. باستخدام كس
3. باستخدام جافا سكريبت
4. الجمع بين استخدام كس وجافا سكريبت
5. أمثلة ونصائح
6. باستخدام السمة المعطلة
7. استخدام كس لنمط مربع نص غير نشط
8. استخدام جافا سكريبت لتغيير حالة مربع النص ديناميكيا
9. سؤال وجواب
10. هل من الممكن لجعل مربع نص غير نشط باستخدام المغلق فقط?
11. كيف يمكنني جعل مربع نص غير نشط باستخدام كس وجافا سكريبت?
12. كيف يمكنني جعل مربع نص غير نشط باستخدام جافا سكريبت فقط?
13. كيف يمكنني جعل مربع النص نشطا مرة أخرى بعد جعله غير نشط?
14. هل من الممكن تغيير نمط مربع نص غير نشط باستخدام كس?

كيفية جعل مربع نص غير نشط باستخدام كس وجافا سكريبت

قد نحتاج أحيانا إلى جعل حقل النص غير نشط حتى لا يتمكن المستخدم من تغيير قيمته. في هذه المقالة ، سننظر في كيفية القيام بذلك باستخدام كس وجافا سكريبت.

باستخدام كس

باستخدام كس ، يمكننا تعيين نمط لحقل نص غير نشط لعرضه بصريا مختلفا عن الحالة النشطة.

الإدخال [النوع="نص"] {

لون الخلفية: # اف 7 اف 7 اف 7;

اللون: # 999;

المؤشر: غير مسموح به;

}

هنا قمنا بتعيين خلفية رمادية ولون نص رمادي فاتح لحقل نص غير نشط. نضع المؤشر أيضا في رمز الإجراء المحظور حتى يفهم المستخدم أن الحقل غير متاح للإدخال.

باستخدام جافا سكريبت

إذا كنا بحاجة إلى جعل حقل النص غير نشط برمجيا ، يمكننا استخدام جافا سكريبت.

وثيقة.جيتليمنتبيد ("ميتيكست").معطل = صحيح;

هنا نجد العنصر مع معرف" ميتكست " وتعيين الخاصية المعوقين إلى صحيح لذلك. يؤدي هذا إلى تعيين الحقل إلى حالة غير نشطة ويمنع المستخدم من إدخال قيمته أو تحريرها.

الجمع بين استخدام كس وجافا سكريبت

يمكننا أيضا الجمع بين كس وجافا سكريبت لخلق منطق أكثر تعقيدا لحقل النص غير نشط.

وظيفة ديسابليتكستبوكس () {

وثيقة.جيتليمنتبيد ("ميتيكست").معطل = صحيح;

وثيقة.جيتليمنتبيد ("ميتيكست").قائمة الفصل.إضافة ("معطل");

}

في هذا المثال ، نستخدم جافا سكريبت لتعيين الخاصية المعطلة لحقل نصي وإضافة فئة" معطل " إلى العنصر عبر قائمة الفئات.إضافة () طريقة. ثم يمكننا تحديد أنماط لفئة" معطل " في كس لتخصيص مظهر حقل النص غير النشط.

المدخلات.معاق {

لون الخلفية: # اف 7 اف 7 اف 7;

اللون: # 999;

}

هنا نحدد أنماط فئة" معطل " ، والتي تحدد خلفية رمادية ولون نص رمادي فاتح لحقل نص غير نشط.

نتيجة لذلك ، باستخدام كس وجافا سكريبت ، يمكننا جعل حقول النص غير نشطة وتخصيص تمثيلها المرئي وفقا لاحتياجاتنا.

أمثلة ونصائح

لجعل حقل نص غير نشط باستخدام كس وجافا سكريبت ، يمكنك استخدام الطرق التالية:

2. باستخدام جافا سكريبت:

وثيقة.جيتليمنتبيد ("ميتيكست").معطل = صحيح;

في المثال أعلاه ، سيكون حقل النص مع معرف" النص " غير نشط.

من المهم ملاحظة أن كلتا الطريقتين تجعل حقل النص غير نشط ، ولكن تظل القدرة على إدخال النص. إذا كنت بحاجة إلى جعل حقل النص غير نشط تماما ، فيمكنك أيضا استخدام كلتا الطريقتين مع تعيين سمة القراءة فقط:

الإدخال [النوع= "نص"].معاق {

مؤشر الأحداث: لا شيء;

}

وثيقة.جيتليمنتبيد ("ميتيكست").معطل = صحيح;

وثيقة.جيتليمنتبيد ("ميتيكست").للقراءة فقط = صحيح;

وبالتالي ، سيكون حقل النص غير نشط وغير متاح لإدخال النص.

الاختيار بين استخدام كس أو جافا سكريبت يعتمد على الوضع المحدد ومتطلبات المشروع. إذا كنت بحاجة إلى تطبيق الأنماط فقط للتأثير المرئي،فيجب عليك استخدام أحداث مؤشر خاصية كس. إذا كنت بحاجة إلى حظر الإدخال تماما ، فيجب عليك استخدام جافا سكريبت.

باستخدام السمة المعطلة

يمكن استخدام السمة المعطلة لجعل مربع النص غير نشط ، مما يعني أن المستخدم لن يتمكن من إدخال محتوياته أو تغييرها.

لاستخدام السمة المعطلة ، ما عليك سوى إضافتها إلى العلامة أو.

على سبيل المثال ، سيقوم الكود التالي بإنشاء حقل نص غير نشط:

أو سيؤدي هذا الرمز إلى إنشاء حقل غير نشط لإدخال نص طويل:

ومع ذلك ، تجدر الإشارة إلى أن السمة المعطلة ليست حماية كاملة ضد تغيير قيمة الحقل ، وبالتالي ، يلزم معالجة بيانات إضافية على جانب الخادم لضمان أمان البيانات المدخلة.

أولا ، لنقم بإنشاء مربع نص بسيط باستخدام علامة

وإضافة فئة إليها

مربع النص

:

الآن دعونا إضافة أنماط للفئة

مربع النص

في ملف كس لدينا:

.مربع النص {

العرض: 300 بكسل;

الارتفاع: 40 بكسل;

نصف قطر الحدود: 5 بكسل;

حجم الخط: 16 بكسل;

}

الآن سيكون مربع النص الخاص بنا الأبعاد المحددة والسكتة الدماغية والخط.

لجعل مربع النص غير نشط ، أضف فئة إضافية

معاق

اللون: #888;

الآن ، لجعل مربع النص غير نشط ، يمكننا إضافة فئة

:

في هذا المثال ، أضفت أيضا

السمة للقراءة فقط

لمنع تحرير محتوى مربع النص.

الآن بعد أن مربع النص لدينا لديه فئة

أدخل النص:

تغيير الدولة

تضمين شفرة جافا سكريبت في العلامة داخل العلامة :

حفظ الملف مع التمديد.هتمل وفتحه في المتصفح. يمكنك الآن النقر فوق الزر" تغيير الحالة " لجعل مربع النص غير نشط أو نشط.

في هذا المثال ، تصل وظيفة توجليتكستبوكس () إلى عنصر مربع النص بواسطة معرفه وتتحقق من حالته الحالية. إذا كان مربع النص غير نشط بالفعل ، فإنه يجعله نشطا عن طريق تعيين الخاصية المعطلة إلى خطأ. إذا كان مربع النص نشطا ، فإنه يجعله غير نشط عن طريق تعيين الخاصية المعطلة إلى صحيح.

وبالتالي ، فإن جافا سكريبت تجعل من السهل تغيير حالة مربع النص اعتمادا على احتياجات تطبيق الويب أو صفحة الويب الخاصة بك.

سؤال وجواب