Bir metin girişini düzenlenebilir hale nasıl getirebilirim?

Metin girişi var

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

İşte bunun için CSS'im

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; 

Bir ayar ya da hile var mı, onun yerine bir etiket yapmayı düşünüyordum ama stil hakkında nasıl. Onları nasıl dönüştürebilirim ve daha iyi bir yol var mı yoksa tek yol mu bu?

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

Stil gerektirmez.

<input>MDN'ye bakın https://developer.mozilla.org/en/docs/Web/HTML/Element/input#Attributes

Sen özelliğini ekleyebilirsiniz readonlygirişine:

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

Daha fazla bilgi: http://www.w3schools.com/tags/att_input_readonly.asp

readonlyGirişinizin yalnızca okunmasını istiyorsanız, niteliği kullanabilirsiniz . Girdinin disabledgösterilmesini, ancak tamamen devre dışı bırakılmasını istiyorsanız özniteliği kullanabilirsiniz (PHP gibi dilleri işlemek bile bunları okuyamaz).

Mevcut cevapları tamamlamak için:

Bir giriş öğesi salt okunur veya devre dışı bırakılabilir (hiçbiri düzenlenebilir değildir, ancak birkaç fark vardır: odak, ...)

İyi bir açıklama burada bulunabilir:
HTML form giriş alanları için devre dışı = “devre dışı” ve readonly = “salt okunur” arasındaki fark nedir?

Nasıl kullanılır:

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

Ayrıca burada açıklandığı gibi CSS veya JavaScript ile bunu yapmak için bazı çözümler vardır .

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

Https://www.w3schools.com/tags/att_input_readonly.asp adresinde görebilirsiniz.

"Salt okunur" ayarlama yöntemi:

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

"salt okunur" işlevini iptal etmek için (jQuery'de çalışma):

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

salt okunur özelliğini ekle

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

veya -

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

css gerekmez!

sonunda sadece engelli eklemeniz gerekiyor

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

Ekle readonly:

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

Değerin bir formda gönderilmesini istemiyorsanız, disabledözniteliği ekleyin .

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

Bunu yapmak için her zaman çalışan CSS kullanmanın bir yolu yoktur.

Neden? CSS hiçbir şeyi "devre dışı bırakamaz". Yine de ekranı veya görünürlüğü kapatabilir ve kullanabilirsiniz, pointer-events: noneancak pointer-eventsIE 11'den önceki IE sürümlerinde çalışmaz.

gerçekten CSS kullanmak istiyorsanız , alanı düzenlenemez hale getirecek aşağıdaki özelliği kullanın.

pointer-events: none;