Fare un campo di inserimento testo sembrano disabili, ma agire in sola lettura

Question

Ho un campo di input HTML che voglio che l'utente sia in grado di vedere, ma non modificare. Se contrassegno il campo come "disattivato", non viene inviato insieme al resto del modulo. Se lo contrassegno come 'readonly', si comporta come quello che voglio, ma comunque sembra abilitato (almeno su Chrome).

Fondamentalmente, io voglio il campo di input per guardare come un campo disabilitato, ma si comportano come un campo di sola lettura. È possibile?

Grazie.

EDIT: Inoltre, se segnare come 'sola lettura', è ancora possibile cambiare il suo valore con un doppio clic su di esso e selezionando qualcosa che prima era lì.

Answer 1

Ecco soluzione: Hai disabilitato ingresso dove si vuole (solo per la visualizzazione del valore) e hanno un ingresso nascosto con nome e il valore è necessario.

Answer 2

Si potrebbe utilizzare i CSS per farlo sembrare come vuoi, anche se questo potrebbe non corrispondere altri campi disabili cross browser/piattaforma.

<input type="text" value="Sample text" readonly="readonly" style="color: #787878;"/> 

Answer 3

ho avuto un problema simile con JSF in cui un campo nascosto ha lavorato per la persistenza del valore di cui avevo bisogno, ma il valore in una sola lettura o di campo di inserimento disabilitato otterrebbe eliminato se la convalida del modulo non è riuscita al momento della presentazione. Ho trovato una soluzione alternativa che sembra funzionare in modo piuttosto elegante, lasciando il campo di input tecnicamente modificabile, ma che impedisce la modifica facendo una sfocatura non appena riceve lo stato attivo. Anche se potresti non avere lo stesso problema con il tuo ambiente lato server che ho fatto con JSF (che non invia valori anche da campi di input contrassegnati solo di sola lettura), potresti essere in grado di utilizzare la stessa tecnica nella tua situazione, con risultato che non è necessario un campo nascosto separato per mantenere il valore. Come la seconda risposta, tuttavia, non affronta il problema di rendere il campo sguardo disabili, almeno non senza un po 'di codice CSS aggiuntivo.

Il codice in JSF:

<p:inputText id="entid" value="#{RequestBean.entityID}" onfocus="blur();" /> 

che diventa il seguente codice HTML:

<input id="entid" type="text" value="10003" onfocus="blur();" /> 

Si può vedere di più su di esso qui: How to persist JSF view parameters through validation

Answer 4

So che questo come stato risposto, ma volevo per dare il mio esempio CSS.

Perché quando stavo cercando una soluzione, come stile un campo di input in modo che sembrasse disabilitato, ho sempre finito con un campo di input simile a questo.

Con il border-sinistra & cima avere un colore più scuro, ecc Quindi un risolto utilizzando questo codice CSS.

input[readonly]{ 
    border-color: darkgrey; 
    border-style: solid; 
    border-width: 1px; 
    background-color: rgb(235, 235, 228); 
    color: rgb(84, 84, 84); 
    padding: 2px 0px; 
} 

Realizzato un jsfiddle così voi ragazzi può dare un'occhiata più da vicino.

Sembra buono su Chrome, su altri browser è necessario modificare i colori un po 'nervosa. Come in Firefox, devi anche cambiare il colore e il colore di sfondo in ecc.

background-color: rgb(240, 240, 240); 
color: rgb(109, 109, 109);