javascript - Cum să dezactivezi un input de tip text?

Vreau să dezactivez scrierea într-un câmp de input de tip text folosind JavaScript, dacă este posibil. Câmpul de input este populat dintr-o bază de date; de aceea nu vreau ca utilizatorul să îi modifice valoarea.

Răspuns #1

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

sau

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

Rețineți că readOnly ar trebui să fie în camelCase pentru a funcționa corect în Firefox (magie).

Demo: https://jsfiddle.net/L96svw3c/ -- explică oarecum diferența dintre disabled și readOnly.

Răspuns #2

Dacă știți acest lucru atunci când pagina este redată, ceea ce pare că știți pentru că baza de date are o valoare, este mai bine să o dezactivați la redare în loc să folosiți JavaScript. Pentru a face asta, adăugați pur și simplu atributul readonly (sau disabled, dacă doriți să îl eliminați și din trimiterea formularului) la <input>, astfel:

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

Răspunsul #3

Dacă datele sunt populate din baza de date, ați putea lua în considerare nesugestia de a folosi un tag <input> pentru a le afișa. Cu toate acestea, îl puteți dezactiva direct în tag:

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

Dacă trebuie să îl dezactivați mai târziu cu Javascript, puteți seta atributul „disabled”:

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

Motivul pentru care sugerez să nu afișezi valoarea ca un <input> este că, din experiența mea, cauzează probleme de aspect. Dacă textul este lung, atunci într-un <input> utilizatorul va trebui să încerce să deruleze textul, ceea ce nu este ceva ce oamenii obișnuiți ar ghici să facă. Dacă îl pui pur și simplu într-un <span> sau ceva asemănător, ai mai multă flexibilitate în stilizare.

Răspuns #4

Obțineți o referință la caseta dvs. de introducere cum doriți (de exemplu document.getElementById('mytextbox')) și setați proprietatea sa readonly la true:

myInputBox.readonly = true;

Alternativ, poți pur și simplu să adaugi această proprietate direct în linie (nu este necesar JavaScript):

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