Efecto “placeholder” para nuestros formularios en HTML4 con JavaScript

Una de las novedades introducidas en HTML5 son los marcadores de posición o comunmente llamados placeholder que, para quien no los conozca, son los textos que aparecen por defecto en los distintos campos de nuestros formularios.

En nuestras webs maquetadas en HTML5 esta propiedad ya ha sido implementa y basta con añadir el atributo “placeholder” a nuestros campos tal y como se muestra en el siguiente ejemplo:

 

Ahora bien, dado que HTML5 no es soportado por la mayoría de navegadores o, por cualquier motivo, tenemos nuestra web maquetada en HTML4 (o XHTML) podemos dar este mismo efecto con la ayuda del siguiente código Javascript (obtenido de www.niklaskoehler.de).

Simplemente lo situamos dentro de nuestras etiquetas <head></head> definiendo el id de nuestro input y el texto que queramos que aparezca reflejado:

 


4 Comments

Join the discussion and tell us your opinion.

Gerardreply
5 agosto, 2013 at 11:10 am

Me funciona a la perfección, muchas gracias! Ahora tengo una pequeña duda. Si tengo varios inputs, ¿se puede hacer de algún modo dentro de la misma función, o tengo que crear una nueva función js para cada input? Sé poco de Js.

Saludos y gracias de antemano 🙂

Daniel Quevedoreply
25 septiembre, 2013 at 11:04 am
– In reply to: Gerard

Hola Gerard,

En nuestro caso, al funcionar con la función ready (la primera que se ejecuta, la cual es única) no nos queda otra opción que definir los disparadores para cada elemento/input del formulario. No queda otra.

Pero por poder sí que se podría hacer como dices, por ejemplo: haciendo una funcion que reciba como parámetro el input que te interesa en cada momento. Lo cual te obliga que esa función se ejecute en algún sitio y de algún modo (al pulsar en el input, función onClick; al cambiar de input con el teclado, función onChange…) el problema es que no te lo hace dinamicamente y el efecto no sería realmente un placeholder como tal…

En otras palabras: sí se puede, pero no quedaría del todo bien 🙁

Espero haberte aclarado algo. Y perdona la tardanza en contestar.

Un saludo.

Victorreply
25 septiembre, 2013 at 9:51 am

Esto no funciona si tu web permitiese el valor indicado como plantilla. Está claro que nadie va a escribir el e-mail tuemail@mail.com (¿o tal vez sí?) pero con casos menos exclusivos se puede dar el problema:

Por ejemplo imaginemos que lo queremos usar en un buscador: Si InputText tiene el valor “Escribe tu consulta” y da la casualuidad que el usuario quiere buscar articulos que hablen sobre escribir consultas y pone “Escribe tu consulta” consideraremos que ese valor es el valor vacío.
Yo usuaría una variable bool asociada para indicar si el campo está vacío y no me fiaría completamente del texto introducido:

$(document).ready(function(){
var Element = “#email”;
var InputText = “tuemail@mail.com”;
var empty = true;

$(Element).val(InputText);

$(Element).bind(‘focus’,function(){
$(this).addClass(‘focus’);
if($(this).val()==InputText && empty){
$(this).val(”);
}
}).bind(‘blur’,function(){
empty = $(this).val()==””;
if($(this).val()==””){
$(this).val(InputText);
$(this).removeClass(‘focus’);
}
});
});

Daniel Quevedoreply
25 septiembre, 2013 at 11:19 am
– In reply to: Victor

Hola Víctor,

Si no he entendido mal… tu quieres evitar que el usuario pueda hacer un “submit” del formulario con los campos que aparecen de inicio en los placeholders reemplazándolos por inputs vacíos.

Como solución que propones… a simple vista la veo correcta. Además fuerzas a que el usuario introduzca algo si metes los input como required. Así a bote pronto me gusta… pero, ¿Y si te digo que el buscador que tú propones cascaría si le pasas el campo vacío porque la consulta en BD no lo contempla?. Ya entramos en aspectos de validación de campos donde podemos controlar de muchas maneras que el campo introducido es el correcto. Por ponerte un ejemplo: en el campo email en vez de poner “tudireccion@correo.com”, la cual pasaría el primer corte de validación, podríamos poner un place holder diferente tipo “Escribe aquí tu email…” así en el caso de que el usuario hiciera un submit de primeras no pasaría la validación.

Lo dicho, hay mil maneras de pensarlo pero ya entramos en cosas de validaciones. Pero no esta mal tu código (no lo he probado, te lo estoy diciendo a primera vista).

Un saludo,

Leave a reply

Este sitio usa Akismet para reducir el spam. Conoce cómo se procesan los datos de tus comentarios.