> Faqs > Borrar caja de texto al situarse sobre ella

Borrar caja de texto al situarse sobre ella

Necesito aplicarle a mi formulario de consulta un código javascript para que al hacer clic sobre cada caja desaparezca el texto que estaba escrito en esa caja, para que el usuario pueda introducir sus datos personales.

Acá les doy un ej. de como quiero que sea:

[ Ingrese aquí su nombre ] 
[ Ingrese aquí su email ] 
[ Escriba aquí su consulta ]

Los corchetes representan a las cajas de texto o input. El ultimo corchete representa a un textarea.

Respuestas

Esto es bastante sencillo. Simplemente tienes que igualar a "" la propiedad value del campo de texto cuando reciba el evento focus.

Suponiendo que tienes un campo de texto así:

<input type="text" id="campotexto" name="campotexto">

Ahora accedes al campo por medio de su identificador y le asignas el manejador de evento "focus". Con este código Javascript lo solucionas:

var campotexto = document.getElementById('campotexto');
campotexto.addEventListener('focus', function() {
  campotexto.value = "";
})

La parte que se podría complicar un poco es si quieres recuperar el texto que habia antes de borrarlo, si sales del campo de texto sin escribir nada. Pero eso sería otra pregunta ya :)

El ejercicio sería exactamente igual para campos input que para campos textarea, pues ambos tienen el evento focus y ambos tienen la propiedad value, que almacena el texto escrito en el campo, así que el código lo puedes adaptar simplemente cambiando el identificador del campo.

Camila
412 16 25 5

Hola! Este ejemplo que solicitas lo hemos tratado en un artículo en DesarrolloWeb.com: Cómo hacer un campo input con explicación: http://www.desarrolloweb.com/articulos/campo-input-explicacion-mootools.html Es justo como solicitas, que la explicación aparece en el campo de texto y al colocarte en el campo se borra para que el usuario pueda escribir lo que desee.

Lo ideal sería dar una solución usando únicamente JavaScript nativo.