Marcamos este ejercicio como obsoleto porque no es necesario hacer esta práctica mediante Javascript, ya que actualmente existe un atributo disabled que funciona en el HTML y para el que no necesitamos usar Javascript.

Es decir, si queremos inhibir un campo de formulario lo normal es marcarlo como disabled y ya esta:

<input type="text" name="elemento-input" disabled>

Este taller, no obstante, puede estar interesante si se quiere conocer un poco más sobre los eventos focus y blur de Javascript y su funcionamiento.

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í: