Placeholder es un atributo HTML5 utilizado como una pequeña pista o descripción corta del valor esperado en un campo de texto dentro de un formulario, como por ejemplo «Buscar», «Introduzca su e-mail», etc. Esta descripción se muestra dentro de la caja de texto cuando éste se encuentra vacío y desaparece cuando el elemento obtiene el foco.
Cómo hemos dicho se encuentra disponible desde la versión de HTML5 y su uso se encuentra bastante extendido en aplicaciones y páginas a lo largo y ancho de Internet. Funciona en los campos input de tipo: text, search, url, tel, email y password. Es soportado por todos los navegadores (Firefox, Opera, Chrome, Safari, etc.), pero existe un problema si quieres utilizarlo con Internet Explorer (de momento ninguna versión lo soporta).
Navegando por la web en busca de una solución para aplicar a uno de los proyectos en los que trabajo, cuya interfaz debe ser similar en todos los navegadores, encontré ésta que usa jQuery. jQuery es una librería javascript, que siempre es aplicable a multitud de problemas y usos, para alterar el comportamiento y visualización de los documentos web en navegadores, así como realizar peticiones asíncronas (ajax), y de la que ya os he hablado en otros artículos.
Podemos usar el siguiente código:
$(function() {
if(!$.support.placeholder) {
var active = document.activeElement;
$(':text').focus(function () {
if ($(this).attr('placeholder') != '' && $(this).val() == $(this).attr('placeholder')) {
$(this).val('').removeClass('hasPlaceholder');
}
}).blur(function () {
if ($(this).attr('placeholder') != '' && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) {
$(this).val($(this).attr('placeholder')).addClass('hasPlaceholder');
}
});
$(':text').blur();
$(active).focus();
$('form').submit(function () {
$(this).find('.hasPlaceholder').each(function() { $(this).val(''); });
});
}
});
Y este podría ser el css con el estilo, ya que el color de la letra del placeholder aparecería en un tono más grisáceo, como difuminado:
.hasPlaceholder { color: #777; } Lo que hace el código es sobreescribir el evento focus (posicionas el foco) y blur (el foco abandona el elemento) para elementos de tipo texto, en aquellos navegadores que no soportan el atributo placeholder, vamos en IE. Cuando se producen dichos eventos, leen el texto del atributo placeholder y lo muestran como valor del elemento (blur) aplicando la clase hasplaceholder, o bien borran el valor del campo (focus) y eliminan la clase hasplaceholder del campo de texto.
También se sobreescribe el evento submit, para borrar todos los valores de los campos de texto que muestran el texto placeholder, justo antes de enviar el formulario al servidor evitando que esos campos tengan valores incorrectos.
Se trata de una solución bastante elegante y nada intrusiva, porque sólo se aplica si el navegador no soporta el atributo. En caso de utilizar placeholder con Firefox, Safari, Chrome… el código jQuery no tiene efecto.
7 respuestas a “Placeholder en Internet Explorer”
Gracias por el post, funcionó tal y como dijiste. No obstante hay un detalle. El formulario deja de validar correctamente. El placeholder es tomado como un valor de entrada y aunque se pongan condiciones usando php, en mi caso, el campo se asimila como lleno. No sé si solo es un problema que me ha sucedido a mi.
Gracias de nuevo.
Hola Carlos Felipe,
Ignoro cómo estás validando los campos mediante PHP pero te comento cómo me funciona a mí. Al principio la validación la realizaba en el servidor, en el momento del Submit del formulario y en el caso de que el valor de la caja de texto fuera el texto del placeholder, se sobreescribe la función para poner el valor » a todos los campos con la clase placeholder. Esto se hace con la siguiente línea, tal como explico en el post. Es decir, una vez que el servidor recibe todos los campos puede validar que son distintos de ».
$('form').submit(function () {
$(this).find('.hasPlaceholder').each(function() { $(this).val(''); });
});
Posteriormente mejoré esta validación añadiendo código javascript para realizar la validación en el cliente (browser) y realizar la búsqueda mediante ajax:
$j(this).click(function(e){if (e.target.id == 'lupa') {
$j(this).find('.hasPlaceholder').each(function() { $j(this).val('').removeClass('hasPlaceholder');});
//Realizamos la búsqueda si pulsa la lupa
search();
}
});
$j("#inputSearch").keypress(function(event){
if ( event.which == 13 ) {
event.preventDefault();
$j(this).find('.hasPlaceholder').each(function() { $j(this).val('').removeClass('hasPlaceholder');});
//Si pulsa Enter, realizamos la búsqueda
search();
}
});
};
//Realiza la búsqueda por el texto introducido
function search() {
if($j("#inputSearch").attr("value") == '') {
$j("#mensajebusquedaexacta").html("Introduzca un texto para realizar la búsqueda");
$j("#mensajebusquedaexacta").slideDown();
return true;
} else {
...
// Realizamos la búsqueda mediante ajax
...
}
}
En este código detectamos cuando pulsa un icono con una lupa o pulsa enter; buscamos todos los campos cuya clase sea placeholder y establecemos el valor de dichos campos a ». Posteriormente llamamos a la función de búsqueda en la que validamos que sea distinto de ». Si el campo es » escribimos dentro de un span cuyo id es mensajebusquedaexacta el mensaje que indica que tiene que introducir algún valor, llamamos a slide down para mostrarlo con dicho efecto y retornamos sin buscar. En caso contrario, realizamos la llamada ajax.
Espero que te sirva de ayuda y gracias por tu comentario.
Saludos
Gracias por la informacion me ha servido bastante en verdad que doy gracias de que haya personas que nos puedan ayudar a resolver nuestros problemas. gracias nuevamente.
Gracias Juan, me alegro de que te sea de utilidad.
Gracias por leer mi blog. Saludos
Hola, me parece un script sencillo y funcional. Sólo tengo un problema, similar a lo que Carlos comentó. Estoy usando un formulario que funciona únicamente con Javascript, es muy sencillo, sólo hay que llenar los campos y al enviar devuelve los mismos datos. Sin embargo, al usar este plugin los campos vacíos aparecen también al enviar, y su valor es el placeholder que tiene.
¿Cómo podría condicionar que si el campo está vacío no agregue el placeholder al darle Submit?
Hola Alberto,
En la respuesta al comentario de Carlos tienes la solución, un código JavaScript que limpia los campos de texto que tienen la clase «hasplaceholder», cuando enviamos el formulario. De esta forma los campos que no hemos completado, se validarán con el valor vacío.
Espero que te sirva. Gracias por leer el blog.
Hola amigo tu codigo es el más sencillo que he encontrado sobre este tema y muy entendible. Pero lamentablemente hace lo mismo q los otros… Te cuento tengo un campo tipo password y justo en este campo me da problema. Al introducir texto el valor del placeholder se queda alli. No es al enviar es al introducir texto en ese campo.