¿Cómo hago que una entrada de texto no sea editable?

344

Entonces tengo una entrada de texto

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

Aquí está mi CSS para ello

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;

¿Hay una configuración o un truco para esto? Estaba pensando en hacer una etiqueta, pero ¿qué hay del estilo? ¿Cómo los convierto y hay una mejor manera o es la única?

html css html-input

— Matt Elhotiby
fuente

706

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

No se necesita estilo.

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

— BoltClock
fuente

44

o readonly = "readonly" si le gusta que sea todo XML-y, vea el ejemplo de Stephan Muller a continuación :)

— Algy Taylor

1

@Algy Taylor: Sí, eso estaba en la respuesta original cuando la pregunta original tenía una etiqueta rebelde [xhtml] que enloqueció a todos acerca de cuál era válido para qué estándar: /

— BoltClock

¿hay alguna manera de eliminar ese círculo rojo que aparece cuando se pasa sobre textareacon readonlyatributo?

— Chaudhry Waqas

1

@ Shafizadeh - No, y eso es algo bueno. Sería difícil para los navegadores implementar correctamente y confuso para la gente entenderlo. no intente hacer que un control simple haga una tarea compleja. Divida su entrada en partes, con cada parte simple (un control editable, luego un elemento HTML no editable, luego otro control editable).

— ToolmakerSteve

1

También asegúrese de verificar este lado del servidor si no desea que el valor se mantenga. En la herramienta de desarrollo del navegador es fácil eliminar el atributo, lo que a su vez hace que el campo de entrada vuelva a ser editable.

— Kurt Van den Branden

70

Puede agregar el atributo readonlya la entrada:

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

Más información: http://www.w3schools.com/tags/att_input_readonly.asp

— Stephan Muller
fuente

41

Puede usar el readonlyatributo, si desea que su entrada solo se lea. Y puede usar el disabledatributo, si desea que se muestre la entrada, pero totalmente deshabilitada (incluso los lenguajes de procesamiento como PHP no podrán leerlos).

— sacudida
fuente

2

Cuando envía un formulario a un archivo php, no leerá las entradas deshabilitadas. Puede ser lo que quiso decir.

— Carlos2W

3

lo que sucede realmente es que las entradas deshabilitadas NO SE ENVÍAN INCLUSO cuando envía un formulario, no tiene nada que ver con php, js ni nada.

— vasilevich

28

Solo para completar las respuestas disponibles:

Un elemento de entrada puede ser de solo lectura o deshabilitado (ninguno de ellos es editable, pero hay un par de diferencias: foco, ...)

Puede encontrar una buena explicación aquí:
¿Cuál es la diferencia entre disabled = "disabled" y readonly = "readonly" para los campos de entrada de formulario HTML?

Cómo utilizar:

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

También hay algunas soluciones para hacerlo a través de CSS o JavaScript como se explica aquí .

— jsidera
fuente

55

Si se va a utilizar />para cerrar las etiquetas, es posible que así ampliar sus atributos para disabled="disabled"y readonly="readonly"también.

— BoltClock

5

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

Se puede ver en https://www.w3schools.com/tags/att_input_readonly.asp

El método para establecer "solo lectura":

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

para cancelar "solo lectura" (trabajar en jQuery):

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

— J. Fan
fuente

3

agregar el atributo de solo lectura

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

o -

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

no se necesita css!

— Vibhaas Srivastava
fuente

22

¿Qué agrega esto a la pregunta que mi respuesta y la respuesta de Stephan de más de 3 años antes no tenían? Incluso reflejaste mi afirmación sobre que CSS no es necesario.

— BoltClock

2

solo necesita agregar deshabilitado al final

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

— Michan
fuente

1

El valor no se envía si lo establece en deshabilitado. Puede ser lo que necesita, pero no es lo que se le pidió. Como nota al margen, vine aquí precisamente porque mi entrada "deshabilitada" no se estaba comportando como esperaba

— Balmipour

2

Añadir readonly:

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

Si desea que el valor no se envíe en un formulario, agregue el disabledatributo.

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

No hay forma de usar CSS que siempre funcione para hacer esto.

¿Por qué? CSS no puede "deshabilitar" nada. Todavía puede desactivar la visualización o la visibilidad y el uso, pointer-events: nonepero pointer-eventsno funciona en versiones de IE que salieron antes que IE 11.

— zixuan
fuente

0

si realmente desea usar CSS , use la siguiente propiedad que hará que el campo no sea editable.

pointer-events: none;

— saadk
fuente

Oh oh oh Esto no funciona en algunos navegadores.

— zixuan