Inhibir un campo texto de formulario con Javascript

  • Por
Hacer que un campo de formulario quede deshabilitado, es decir, que no se pueda posarse encima y cambiar su valor.
Esta vez toca un taller muy rápido y sencillo con Javascript para hacer que un campo de formulario de tipo texto se encuentre inhibido, es decir, que no podamos colocarnos encima de él para editar su contenido.

Referencia: Si lo que queremos es inhibir un campo de formulario de tipo radio (radio button) será necesaria otra técnica relatada en un taller distinto: Inhibir radio button con Javascript

Focus y Blur

La manera de hacerlo requiere el conocimiento de dos conceptos habituales de Javascript relacionados con el foco de la aplicación.

El concepto focus, está relacionado con ganar foco de la aplicación. El método focus(), que tienen los campos de texto y otros elementos de formulario, sirve otorgar el foco de la aplicación a ese elemento. El manejador de evento onfocus salta cuando un elemento gana el foco de la aplicación.

El concepto blur, está asociado a perder el foco de la aplicación. El método blur() sirve para que los elementos de formulario pierdan el foco y el manejador de eventos onblur se activa cuando el elemento al que lo apliquemos pierda el foco de la aplicacion.

El ejercicio

Para inhibir un campo de formulario podemos hacer que el usuario nunca se pueda posar en ese elemento o bien, que si se llega a posar, se expulse inmediatamente. Para esto lo único que tememos que hacer es retirar el foco de un elemento cuando lo haya ganado

Nosotros utilizaremos el evento onfocus para detectar el instante en el que el elemento gana el foco y en ese momento haremos uso del método blur() para retirar el foco.

El código es extremadamente simple para tanta explicación:

<form>
<input type="text" value="122" onfocus="this.blur()">
</form>

El único detalle que merece la pena señalar es el uso de la palabra this, que hace referencia al elemento donde se está utilizando, en ese caso el campo de texto. this.blur() sería una simple llamada al método blur() en el elemento de formulario donde está colocada.

Puede verse en funcionamiento aquí:

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

eoes

11/12/2003
Tambien se puede hacer sin utilizar scripts solo con readonly. Ejemplo:

<input name="campo" readonly type="text" id="campo" value="valor">

Daniela

07/10/2005
Solo una critica constructiva: haciendo click con el boton derecho del mouse y click en "pegar", se puede escribir sobre la caja de texto.. habria que contemplar esta posibilidad...
Salu2!
Daniela

Juan

18/10/2005
Tambien se puede deshabilitar el campo de formulario:
<input name="campo" disabled type="text" id="campo" value="valor">

Diego

15/12/2005
Cuando se deshabilita un campo de texto con la propiedad disabled, hay frameworks(por ejemplo struts en java) que no los puede leer en caso que tengan datosy los reconoce como vacio

esquirol

07/2/2006
es solo un ejemplo para mostrar la capacidad de los metodos listillos

nahum

09/6/2006
nos más para agregar un comentario a disable y readonly, para destacar que no hacen lo mismo, a pesar que los dos bloquean el formulario, el primero disable ya no pasa la variable para que se procese en la siguiente página o en la misma, a diferencia de readonly que deshabilita el campo y trasmite la variable.. saludos desde méxico..

Minitank

06/10/2006
Lo malo de usar este metodo es que no se evita que el usuario pueda cambiar el contenido del campo. Cuando se activa el foco te expulsa pero no inmediatamente y con la presteza suficiente uno es capaz de modificar algo.
yo por lo menos lo he ehcho con el portapapeles de KDE.

Vicenet

03/1/2007
Ahora bien imaginen que tengo dos checkbox
o opcion A
Cuadro de texto1
Cuadro de texto1

o opcion B
cuadro de texto1
cuadro de texto 2

Teniendo esto asi quiero que cuando tenga selectionado la opcion a los cuadros de texto de la opcion b esten deshabilitados asi como la opcion not cheched, alguien tiene idea de como hacer esto??

Nestor

21/1/2007
Me gustaría saber como hacer para que el cuadro de texto esté desactivado hasta que se pulse un checkbox.

krizia

15/12/2010
habilitar y deshabilitar
como puedo hacer para cuando presione un botón se activen todos los text

fabian reyes

22/11/2011
Gracias
me fue de muy buena ayuda, gracias