Come faccio a rendere un input di testo non modificabile?

344

Quindi ho un input di testo

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

Ecco il mio CSS per questo

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;

C'è un'ambientazione o un trucco in questo, stavo pensando invece di fare un'etichetta ma che ne dici dello stile. Come posso convertirli ed esiste un modo migliore o è l'unico modo?

html css html-input

— Matt Elhotiby
fonte

707

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

Non è necessario lo styling.

Vedi <input>su MDN https://developer.mozilla.org/en/docs/Web/HTML/Element/input#Attributes

— BoltClock
fonte

4

o readonly = "readonly" se ti piace che sia tutto XML-y, vedi l'esempio di Stephan Muller di seguito :)

— Algy Taylor,

1

@Algy Taylor: Sì, era nella risposta originale quando la domanda originale aveva un tag ribelle [xhtml] che faceva impazzire tutti quelli che erano validi per quale standard: /

— BoltClock

c'è un modo per rimuovere quel cerchio rosso che compare quando passi textareacon il mouse sull'attributo readonly?

— Chaudhry Waqas,

1

@Shafizadeh - No, e questa è una buona cosa. Sarebbe difficile da implementare correttamente per i browser e confondere le persone. non provare a fare un semplice controllo per fare un compito complesso. Suddividi l'input in pezzi, con ogni pezzo semplice (un controllo modificabile, quindi un elemento HTML non modificabile, quindi un altro controllo modificabile).

— ToolmakerSteve

1

Assicurati anche di controllare questo lato server se non vuoi che il valore sia persistente. Lo strumento di sviluppo del browser consente di rimuovere facilmente l'attributo, che a sua volta rende nuovamente modificabile il campo di input.

— Kurt Van den Branden,

70

È possibile aggiungere l'attributo readonlyall'input:

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

Ulteriori informazioni: http://www.w3schools.com/tags/att_input_readonly.asp

— Stephan Muller
fonte

41

È possibile utilizzare l' readonlyattributo, se si desidera solo che l'input venga letto. E puoi usare l' disabledattributo, se vuoi che l'input sia mostrato, ma completamente disabilitato (anche l'elaborazione di linguaggi come PHP non sarà in grado di leggerli).

— scossa
fonte

2

Quando invii un modulo a un file php, non leggerà input disabilitati. Potrebbe essere quello che intendeva dire.

— Carlos2W,

3

ciò che accade con precisione è che gli input disabilitati NON SONO ANCORA INVIATI quando si invia un modulo, non ha nulla a che fare con php, js o altro.

— Vasilevich,

28

Solo per completare le risposte disponibili:

Un elemento di input può essere di sola lettura o disabilitato (nessuno di questi è modificabile, ma ci sono un paio di differenze: focus, ...)

Una buona spiegazione può essere trovata qui:
qual è la differenza tra disabled = “disabled” e readonly = “readonly” per i campi di input del modulo HTML?

Come usare:

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

Ci sono anche alcune soluzioni per farlo attraverso CSS o JavaScript, come spiegato qui .

— jsidera
fonte

5

Se hai intenzione di utilizzare />per chiudere i tag, puoi anche espandere i tuoi attributi disabled="disabled"e readonly="readonly"anche.

— BoltClock

5

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

Si potrebbe vedere in https://www.w3schools.com/tags/att_input_readonly.asp

Il metodo per impostare "sola lettura":

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

per cancellare "sola lettura" (lavoro in jQuery):

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

— J. Fan
fonte

3

aggiungi l'attributo readonly

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

o -

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

nessun css necessario!

— Vibhaas Srivastava
fonte

22

Che cosa aggiunge questo alla domanda che la mia risposta e la risposta di Stephan di oltre 3 anni non hanno già fatto? Hai anche rispecchiato la mia affermazione sul fatto che CSS non fosse necessario.

— BoltClock

2

devi solo aggiungere disabilitato alla fine

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

— Michan
fonte

1

Il valore non viene inviato se impostato su disabilitato. Potrebbe essere quello che ti serve, ma non è quello che ti è stato chiesto. Come nota a

— margine

2

Aggiungi readonly:

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

Se si desidera che il valore non sia inviato in un modulo, aggiungere invece l' disabledattributo.

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

Non c'è modo di usare CSS che funzioni sempre per farlo.

Perché? I CSS non possono "disabilitare" nulla. Puoi comunque disattivare la visualizzazione o la visibilità e l'utilizzo pointer-events: nonema pointer-eventsnon funziona con le versioni di IE rilasciate prima di IE 11.

— Zixuan
fonte

0

se vuoi davvero usare i CSS , usa la seguente proprietà che renderà il campo non modificabile.

pointer-events: none;

— saadk
fonte