Inhibir un campo texto de formulario con Javascript

04/12/02 - 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ía, licencia y acciones sobre este artículo

Informe de Miguel Angel Alvarez* Director de DesarrolloWeb.com Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright. * Para consultas técnicas utilizar la lista de correo. Versión imprimible del artículo Enviar artículo por e-mail Publicar un comentario del artículo

Añadir un comentario del artículo Los comentarios de los visitantes son para ampliar la información del artículo. Cualquiera puede participar.

Se muestran 2 comentarios revisados

Añadir un comentario del artículo

Comentarios sin revisar

Añadir un comentario del artículo Entre los comentarios no revisados puede haber algunos interesantes que se hayan enviado recientemente.

Ver los comentarios no revisados

Añadir un comentario del artículo

Enlaces:

Maestrosdelweb

  Ir arriba