Javascript: como inhibir un campo de texto

Es rápido y sencillo con Javascript hacer que un campo de formulario de tipo texto se encuentre inhibido, es decir, que no podamos colocar el cursor sobre é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 el foco de la aplicación. El método focus(), que tienen los campos de texto y otros elementos de formulario, sirve para 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 con perder el foco de la aplicación. El método blur() sirve para que los elementos de formulario pierdan el foco de la aplicación. El manejador de eventos onblur se activa cuando el elemento al que lo aplicamos pierde el foco de la aplicación.

El ejemplo.

Para inhibir un campo de formulario tendremos que evitar que el usuario pose el cursor sobre ese campo, o bien, que si llega a posarse, 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 que se está utilizando, en este caso el campo de texto. “this.blur()” sería una simple llamada al método blur() en el elemento de formulario que se está empleando.

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies. Puede obtener más información sobre las cookies aquí. ACEPTAR

Aviso de cookies