javascript - Bir input type=text nasıl devre dışı bırakılır?

Mümkünse, JavaScript kullanarak text türündeki bir giriş alanında yazmayı devre dışı bırakmak istiyorum. Giriş alanı bir veritabanından dolduruluyor; bu yüzden kullanıcının değerini değiştirmesini istemiyorum.

Cevap #1

document.getElementById('foo').disabled = true;

veya

document.getElementById('foo').readOnly = true;

Firefox'ta doğru çalışması için readOnly öğesinin camelCase şeklinde olması gerektiğini unutmayın (sihir).

Demo: https://jsfiddle.net/L96svw3c/ -- disabled ve readOnly arasındaki farkı kısmen açıklıyor.

Cevap #2

Sayfa render edildiğinde bunu biliyorsanız, ki veritabanında bir değerin olduğu anlaşıldığına göre biliyorsunuz, bunu JavaScript ile değil, render edildiğinde devre dışı bırakmak daha iyidir. Bunu yapmak için, <input> öğesine readonly özniteliğini (ya da form gönderiminden de kaldırmak istiyorsanız disabled özniteliğini) eklemeniz yeterlidir, şöyle:

<input type="text" disabled="disabled" />
//or...
<input type="text" readonly="readonly" />

Cevap #3

Veriler veritabanından dolduruluyorsa, bunu göstermek için bir <input> etiketi kullanmamayı düşünebilirsiniz. Yine de, etikette doğrudan devre dışı bırakabilirsiniz:

<input type='text' value='${magic.database.value}' disabled>

Daha sonra Javascript ile devre dışı bırakmanız gerekirse, "disabled" özniteliğini ayarlayabilirsiniz:

document.getElementById('theInput').disabled = true;

Değeri bir <input> olarak göstermemeyi önermemin nedeni, deneyimlerime göre bunun düzen sorunlarına yol açmasıdır. Metin uzunsa, bir <input> içinde kullanıcı metni kaydırmayı denemek zorunda kalacaktır ki bu, normal insanların tahmin edebileceği bir şey değildir. Eğer bunu sadece bir <span> içine koyarsanız veya benzer bir şey kullanırsanız, daha fazla stil esnekliğine sahip olursunuz.

Cevap #4

Giriş kutunuza istediğiniz şekilde bir referans alın (örneğin document.getElementById('mytextbox')) ve readonly özelliğini true olarak ayarlayın:

myInputBox.readonly = true;

Alternatif olarak, bu özelliği satır içi olarak ekleyebilirsiniz (JavaScript gerekmez):

<input type="text" value="from db" readonly="readonly" />

İlgili makaleler