Come disabilitare un tipo di input = testo?

123

Desidero disabilitare la scrittura in un campo di input di tipo textutilizzando JavaScript, se possibile. Il campo di input viene popolato da un database; ecco perché non voglio che l'utente modifichi il suo valore.

javascript html

— kawtousse
fonte

172

Se lo sai quando viene eseguito il rendering della pagina, cosa che suona come te perché il database ha un valore, è meglio disabilitarlo durante il rendering invece di JavaScript. Per farlo, aggiungi l' readonlyattributo (o disabled, se vuoi rimuoverlo anche dall'invio del modulo) a <input>, in questo modo:

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

— Nick Craver
fonte

81

Non so perché questo ottiene voti, non risponde alla domanda. Ci aspettavamo risposte javascript.

— Sophie

3

@Sophie è il modo più corretto per il richiedente di farlo in base alla sua situazione, forse è necessario un cambio di titolo.

— Nick Craver

6

la modalità disabilitata impedisce gli eventi di clic nella casella di input, readonly no. FYI.

— knutole

Per fare in modo che il campo di input "readonly" SIA COME il campo "disabled", imposta 'style = "color: gray; background-color: # F0F0F0;"'. (questo era un commento a questa risposta )

— Jake Toronto

2

Tieni presente che i browser sono liberi di ignorare l'attributo "disabled" o "readonly" e non si dovrebbe fare affidamento su questo metodo per evitare che i dati vengano aggiornati in modo affidabile ... se l'elaborazione del codice lato server il modulo accetterà ancora un valore da quel campo e aggiornarlo, chiunque abbia abbastanza esperienza per creare il proprio modulo può aggirare questa "disabilitazione" ... questo è per comodità dell'interfaccia utente solo in un ambiente affidabile. Il vero modo per prevenirlo è con la logica lato server.

— Aaron Wallentine

206

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

o

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

Nota che readOnlydovrebbe essere in camelCase per funzionare correttamente in Firefox (magia).

Demo: https://jsfiddle.net/L96svw3c/ - spiega in qualche modo la differenza tra disablede readOnly.

— hudolejev
fonte

3

Questo ha funzionato per me. La versione di Jquery è $ ('input'). Prop ('disabled', true)

— Daniel Sun Yang

Sono in ritardo di sette anni su questo, ma c'è qualche differenza semantica tra questi due nel 2017?

— Jules

2

Non sei affatto in ritardo, la magia è ancora lì (: non ricordo su quali piattaforme ho provato allora, ma oggi readonly(minuscolo) ancora non funziona in Firefox 52 su Ubuntu - dovrebbe essere il caso del cammello.

— hudolejev

Perché questo non funziona per me? Ho creato un inputelemento con id="gate"e provo il tuo codice, che non sembra funzionare per me ...

— Voldemort's Wrath

21

Se i dati vengono popolati dal database, potresti considerare di non utilizzare un <input>tag per visualizzarli. Tuttavia, puoi disabilitarlo direttamente nel tag:

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

Se devi disabilitarlo con Javascript in un secondo momento, puoi impostare l'attributo "disabled":

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

Il motivo per cui suggerisco di non mostrare il valore come un <input>è che, nella mia esperienza, causa problemi di layout. Se il testo è lungo, <input>l'utente dovrà provare a scorrere il testo, cosa che le persone normali non immaginerebbero di fare. Se lo metti in un <span>o qualcosa del genere, hai più flessibilità nello stile.

— pointy
fonte

3

Tieni presente che disabilitato può rendere il testo quasi illeggibile su alcuni browser. Potresti stare meglio con l'attributo readonly, ad esempio <input type = "text" value = "foo" readonly>

— Olly Hodgson,

7

Puoi anche da jquery:

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

Esempio di lavoro:

$('#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" />

Espandi lo snippet

— Chani Poz
fonte

1

@Chani Poz Stai chiamando il setter js nativo sull'oggetto jquery, il risultato sarà un errore. $ ('# foo') [0] .disabled = true o $ ('# foo'). get (0) .disabled = true farà il lavoro

— Arek Kostrzeba

6

Ottieni un riferimento alla tua casella di input come preferisci (ad esempio document.getElementById('mytextbox')) e imposta la sua readonlyproprietà su true:

myInputBox.readonly = true;

In alternativa puoi semplicemente aggiungere questa proprietà in linea (non è necessario JavaScript):

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

— Roatin Marth
fonte

Se stai scrivendo HTML (al contrario di XHTML), sarebbe <input type = "text" value = "from db" readonly>

— Olly Hodgson