Hacer que un campo de entrada de texto parezca deshabilitado, pero actuar como solo

Question

Tengo un campo de entrada HTML que deseo que el usuario pueda ver, pero no editar. Si marco el campo como "deshabilitado", no se envía junto con el resto del formulario. Si lo marcó como 'solo lectura', se comporta como lo que yo quiero, pero todavía parece habilitado (al menos en Chrome).

Básicamente, quiero que el campo de entrada para mirar como un campo desactivado, pero se comportan como un campo de sólo lectura. es posible?

Gracias.

editar: Además, si lo marque como 'solo lectura', aún es posible cambiar su valor haciendo doble clic en él y seleccionando algo que estaba allí anteriormente.

Answer 1

Aquí hay una solución alternativa: tiene la entrada deshabilitada donde desea (solo para mostrar el valor) y tiene una entrada oculta con el nombre y el valor que necesita.

Answer 2

Puede usar css para que se vea como lo desee, aunque puede que no coincida con otros campos deshabilitados cross browser/platform.

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

Answer 3

tuve un problema similar con JSF en el que un campo oculto trabajó por persistir el valor que necesitaba, pero el valor en un campo de entrada de sólo lectura o discapacitados habría de ser anulado si la validación del formulario fracasó tras la presentación. Encontré una solución alternativa que parece funcionar de forma bastante elegante al dejar el campo de entrada técnicamente editable, pero que evita la edición haciendo una imagen borrosa tan pronto como recibe el foco. Si bien es posible que no tenga el mismo problema con su entorno del servidor que hice con JSF (que no envía valores incluso desde campos de entrada marcados simplemente de solo lectura), es posible que pueda utilizar la misma técnica en su situación, con el Como resultado, entonces no necesita un campo oculto para mantener el valor. Al igual que la segunda respuesta, sin embargo, no aborda el problema de hacer que el campo parezca deshabilitado, al menos no sin algún código CSS adicional.

El código en JSF:

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

que se convierte en el código HTML siguiente:

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

Puede ver más sobre ella aquí: How to persist JSF view parameters through validation

Answer 4

Sé que esto ya ha contestado, pero quería para dar mi ejemplo CSS

Porque cuando estaba buscando una solución, cómo diseñar un campo de entrada para que pareciera que estaba deshabilitado, siempre terminaba con un campo de entrada como este.

Con la frontera- izquierda & superior que tiene un color más oscuro, etc Así que una resuelven usando el código 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; 
} 

realizó una jsfiddle así que ustedes pueden tomar un vistazo más de cerca.

Se ve bien en Chrome, en otros navegadores debe modificar los colores. Al igual que en Firefox, también necesitas cambiar el color y el color de fondo, etc.

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