¿Cómo deshabilitar un tipo de entrada = texto?

123

Quiero deshabilitar la escritura en un campo de entrada de tipo textusando JavaScript, si es posible. El campo de entrada se rellena desde una base de datos; Es por eso que no quiero que el usuario modifique su valor.

javascript html

— kawtousse
fuente

172

Si sabe esto cuando se procesa la página, lo que suena como lo hace porque la base de datos tiene un valor, es mejor deshabilitarla cuando se procesa en lugar de JavaScript. Para hacer eso, simplemente agregue el readonlyatributo (o disabled, si también desea eliminarlo del envío del formulario), de la <input>siguiente manera:

<input type="text" disabled="disabled" />
//or...
<input type="text" readonly="readonly" />

— Nick Craver
fuente

81

No sé por qué esto obtiene votos, no responde la pregunta. Estábamos esperando respuestas de JavaScript.

— Sophie

3

@Sophie es la forma más correcta para que el autor de la pregunta lo haga en función de su situación, tal vez sea necesario un cambio de título.

— Nick Craver

66

el modo deshabilitado evita eventos de clic en el cuadro de entrada, solo lectura no. FYI.

— knutole

Para que el campo de entrada "readonly" se vea como el campo "deshabilitado", establezca 'style = "color: grey; background-color: # F0F0F0;"'. (esto fue un comentario a esta respuesta )

— Jake Toronto

2

Tenga en cuenta que los navegadores son libres de ignorar el atributo "deshabilitado" o "solo lectura" y no se debe confiar en este método para evitar que los datos se actualicen de manera confiable ... si el código del servidor procesando el formulario aún aceptará un valor de ese campo y actualizarlo, cualquier persona con suficiente conocimiento para crear su propio formulario puede omitir esta "desactivación" ... esto es para la conveniencia de la interfaz de usuario solo en un entorno confiable. La forma real de prevenirlo es con la lógica del lado del servidor.

— Aaron Wallentine

206

document.getElementById('foo').disabled = true;

o

document.getElementById('foo').readOnly = true;

Tenga en cuenta que readOnlydebe estar en camelCase para funcionar correctamente en Firefox (magia).

Demostración: https://jsfiddle.net/L96svw3c/ : explica un poco la diferencia entre disabledy readOnly.

— hudolejev
fuente

3

Esto funcionó para mí. La versión de Jquery es $ ('input'). Prop ('disabled', verdadero)

— Daniel Sun Yang

Llego siete años tarde a esto, pero ¿hay alguna diferencia semántica entre estos dos en 2017?

— Julio

2

No llegas tarde en absoluto, la magia sigue ahí (: no recuerdo en qué plataformas probé en ese momento, pero hoy readonly(en minúsculas) todavía no funciona en Firefox 52 en Ubuntu, debería ser un caso de camello.

— hudolejev

¿Por qué esto no funciona para mí? Hice un inputelemento con id="gate"y pruebo tu código, que no parece funcionar para mí ...

— Voldemort's Wrath

21

Si los datos se rellenan desde la base de datos, puede considerar no usar una <input>etiqueta para mostrarlos. Sin embargo, puede deshabilitarlo directamente en la etiqueta:

<input type='text' value='${magic.database.value}' disabled>

Si necesita deshabilitarlo con Javascript más adelante, puede establecer el atributo "deshabilitado":

document.getElementById('theInput').disabled = true;

La razón por la que sugiero no mostrar el valor como <input>es es que, en mi experiencia, causa problemas de diseño. Si el texto es largo, entonces <input>el usuario deberá intentar desplazarse por el texto, lo cual no es algo que la gente normal suponga que haga. Si solo lo sueltas en un <span>o algo, tienes más flexibilidad de estilo.

— Puntiagudo
fuente

3

Tenga en cuenta que deshabilitado puede hacer que el texto sea casi ilegible en algunos navegadores. Puede que esté mejor con el atributo de solo lectura, por ejemplo, <input type = "text" value = "foo" readonly>

— Olly Hodgson

7

También puedes por jquery:

$('#foo')[0].disabled = true;

Ejemplo de trabajo:

$('#foo')[0].disabled = true;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="foo" placeholder="placeholder" value="value" />

Expandir fragmento

— Chani Poz
fuente

1

@Chani Poz Está llamando al js setter nativo en el objeto jquery, dará como resultado un error. $ ('# foo') [0] .disabled = true o $ ('# foo'). get (0) .disabled = true hará el trabajo

— Arek Kostrzeba

6

Obtenga una referencia a su cuadro de entrada como desee (por ejemplo document.getElementById('mytextbox')) y establezca su readonlypropiedad en true:

myInputBox.readonly = true;

Alternativamente, puede simplemente agregar esta propiedad en línea (no se necesita JavaScript):

<input type="text" value="from db" readonly="readonly" />

— Roatin Marth
fuente

Si está escribiendo HTML (en lugar de XHTML) sería <input type = "text" value = "from db" readonly>

— Olly Hodgson