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

Question

Así que tengo una entrada de texto

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

Esta es 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 un ajuste o un truco para esto, yo estaba pensando en hacer un sello en su lugar, pero ¿y el peinado. ¿Cómo los convierto y hay una manera mejor o es que la única manera?

Answer 1

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

No se labra necesario.

Ver <input> en MDN https: //developer.mozilla. org / es / docs / web / HTML / Elemento / entrada # Atributos

Answer 2

Puedes añadir el atributo readonly a 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

Answer 3

Puede utilizar el atributo readonly, si desea que su entrada sólo para ser leído. Y puede utilizar el atributo disabled, si quieres de entrada que se muestra, pero totalmente incapacitado (incluso el procesamiento de lenguajes como PHP no será capaz de leer los).

Answer 4

Sólo para completar las respuestas disponibles:

Un elemento de entrada puede ser de sólo lectura o desactivado (ninguna de ellas se puede editar, pero hay un par de diferencias: el enfoque, ...)

Buena explicación se puede encontrar aquí:
¿Cuál es la diferencia entre discapacitados = “desactivada” y de sólo lectura = “sólo lectura” para los campos de entrada de formulario HTML?

Modo de empleo:

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

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

Answer 5

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

Se podía ver en https://www.w3schools.com/tags/att_input_readonly.asp

El método de ajustar "sólo lectura":

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

para cancelar "sólo lectura" (trabajo en jQuery):

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

Answer 6

añadir el atributo de sólo lectura

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

o -

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

necesita ningún CSS!

Answer 7

sólo tiene que añadir desactivado al final

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

Answer 8

Agregar readonly:

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

Si desea que el valor que se debe no presentarse en una forma, en lugar añadir el atributo disabled.

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

No hay manera de usar CSS que siempre trabaja para hacer esto.

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