كيف أقوم بعمل إدخال نص غير قابل للحفر؟

Question

لذلك لدي إدخال نص

<input type="text" value="3" class="field left">

ها هي CSS الخاصة بي لذلك

background:url("images/number-bg.png") no-repeat scroll 0 0 transparent;
border:0 none;
color:#FFFFFF;
height:17px;
margin:0 13px 0 0;
text-align:center;
width:17px; 

هل هناك إعداد أو خدعة لهذا ، كنت أفكر في القيام بتسمية بدلاً من ذلك ولكن ماذا عن التصميم. كيف يمكنني تحويلهم وهل هناك طريقة أفضل أم أن هذه هي الطريقة الوحيدة؟

Answer 1

<input type="text" value="3" class="field left" readonly>

لا يوجد تصميم ضروري.

نرى <input> على MDN https://developer.mozilla.org/en/docs/web/html/element/input#attributes

Answer 2

يمكنك إضافة السمة readonly إلى المدخلات:

<input type="text" value="3"
       class="field left" readonly="readonly">

مزيد من المعلومات:http://www.w3schools.com/tags/att_input_readonly.asp

Answer 3

يمكنك استخدام readonly السمة ، إذا كنت تريد أن تتم قراءة إدخالك فقط. ويمكنك استخدام disabled السمة ، إذا كنت تريد عرض الإدخال ، ولكن معطل تمامًا (حتى معالجة لغات مثل PHP لن تتمكن من قراءة هذه).

Answer 4

فقط لإكمال الإجابات المتاحة:

يمكن إما عنصر إدخال إما بقراءة أو معطل (لا يوجد أي منها قابل للتحرير ، ولكن هناك بعض الاختلافات: التركيز ، ...)

يمكن العثور على شرح جيد هنا:
ما الفرق بين المعوقين = "معطل" و readonly = "readonly" لحقول إدخال نموذج HTML؟

كيف تستعمل:

<input type="text" value="Example" disabled /> 
<input type="text" value="Example" readonly />

هناك أيضًا بعض الحلول لجعلها من خلال CSS أو JavaScript كما هو موضح هنا.

Answer 5

<input type="text" value="3" class="field left" readonly>

يمكنك أن ترى في https://www.w3schools.com/tags/att_input_readonly.asp

طريقة تعيين "readonly":

$("input").attr("readonly", true)

لإلغاء "readonly" (العمل في jQuery):

$("input").attr("readonly", false)

Answer 6

أضف السمة القراءة

<input type="text" value="3" class="field left" readonly="readonly" >

أو -

<input type="text" value="3" class="field left" readonly>

لا مطلوب CSS!

Answer 7

تحتاج فقط إلى إضافة معاق .في نهايةالمطاف

<input type="text" value="3" class="field left" disabled>

Answer 8

يضيف readonly:

<input type="text" value="3" class="field left" readonly>

إذا كنت تريد عدم إرسال القيمة في نموذج ، فإضافة بدلاً من ذلك disabled ينسب.

<input type="text" value="3" class="field left" disabled>

لا توجد طريقة لاستخدام CSS التي تعمل دائمًا على القيام بذلك.

لماذا ا؟ لا يمكن لـ CSS "تعطيل" أي شيء. لا يزال بإمكانك إيقاف العرض أو الرؤية والاستخدام pointer-events: none لكن pointer-events لا يعمل على إصدارات IE التي ظهرت قبل IE 11.