Bir girdi türü nasıl devre dışı bırakılır = metin?

textMümkünse, JavaScript kullanan bir girdi alanına yazmayı devre dışı bırakmak istiyorum . Giriş alanı bir veritabanından doldurulur; bu yüzden kullanıcının değerini değiştirmesini istemiyorum.

Bunu sayfa görüntülendiğinde biliyorsanız, ki bu sizin gibi görünmektedir çünkü veritabanının bir değeri vardır, JavaScript yerine işlendiğinde onu devre dışı bırakmak daha iyidir. Bunu yapmak için, readonlyözniteliği (veya disabledform gönderiminden de kaldırmak istiyorsanız) <input>şunun gibi ekleyin :

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

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

veya

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

readOnlyFirefox'ta (magic) düzgün çalışması için camelCase'de olması gerektiğini unutmayın .

Demo: https://jsfiddle.net/L96svw3c/ - disabledve arasındaki farkı biraz açıklıyor readOnly.

Veri veritabanından doldurulur ise, düşünebilirsiniz değil bir kullanarak <input>görüntülemek için etiket. Yine de, bunu doğrudan etiketinde devre dışı bırakabilirsiniz:

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

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

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

Değeri bir olarak göstermemeyi önermemin nedeni <input>, deneyimlerime göre yerleşim sorunlarına neden olmasıdır. Metin uzunsa, bir <input>kullanıcının metni denemesi ve kaydırması gerekecektir, bu normal insanların yapmayı tahmin edeceği bir şey değildir. Onu bir <span>veya başka bir şeye bırakırsanız, daha fazla şekillendirme esnekliğine sahip olursunuz.

Ayrıca jquery ile şunları da yapabilirsiniz:

$('#foo')[0].disabled = true;

Çalışma örneği:

$('#foo')[0].disabled = true;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="foo" placeholder="placeholder" value="value" />

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

myInputBox.readonly = true;

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

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