Inhibir un campo texto de formulario con Javascript

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.

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:

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.