Placeholder en Internet Explorer

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. 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).

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.

Nivo Slider, un slideshow con jQuery

Para los que nos dedicamos al desarrollo y diseño de aplicaciones para Internet nos ha sorprendido la rapidez con la que se han propagado los slideshows (también llamados sliders). No hay web actual que se precie que no tenga uno. ¿Y qué es y para qué sirve? Se trata de un componente que presenta una serie de imágenes ordenadas con información seleccionada, que se van presentando una tras otra manteniendo cada una visible un breve periodo de tiempo. Estas imágenes representan una información seleccionada que queremos destacar y pueden incluir un enlace a dicha información ampliada e incluso una etiqueta con una breve descripción. Es muy útil en páginas muy densas con mucha información para, en el mismo espacio, destacar más de un tema.

Existen multitud de estos componentes dependiendo de la funcionalidad que incorporan. En nuestro caso, para una nueva web, el usuario nos pidió incorporar un sencillo slideshow y nos hemos decantado por Nivo Slider. Incorpora 16 efectos de transición, soporta enlaces a imágenes y navegación entre imágenes mediante teclado. Su utilización es sencilla y la versión empaquetada sólo ocupa 15Kb. por lo que se agradece su ligereza. Es un código de libre uso bajo la licencia MIT. Funciona en los siguientes navegadores:

  • Internet Explorer v7+
  • Firefox v3+
  • Google Chrome v4+
  • Safari v4+
  • Opera v10+

Para usarlo en nuestros proyectos necesitamos incluir jQuery, el script de Nivo Slider (jquery.nivo.slider.pack.js) y el CSS de Nivo Slider (nivo-slider.css). Además necesitamos añadir un poco de código HTML  a nuestra página. Suele ser un div con imágenes (images), de hecho, sólo imágenes o imágenes dentro de enlaces están permitidas dentro del div que representa el slider. Cualquier otro código HTML hará que no funcione el control.

<!-- Dentro de la sección <body> de la página --> 
<div id="slider"> 
 <img src="images/slide1.jpg" alt="" /> 
 <a href="http://dev7studios.com">
 <img src="images/slide2.jpg" alt="" title="#htmlcaption"/>
 </a> 
 <img src="images/slide3.jpg" alt="" title="Este es un ejemplo de un caption"/> 
 <img src="images/slide4.jpg" alt="" /> 
</div> 
<div id="htmlcaption" class="nivo-html-caption"> 
 <strong>Esto</strong> es un ejemplo de un caption <em>HTML</em> con <a href="#">un enlace</a>. 
</div> 

Para que el slider se vea correctamente mientras está cargando añadiremos algo de estilos CSS:

#slider { position:relative; width:618px; /* Change this to your images width */ 
 height:246px; /* Change this to your images height */ 
 background:url(images/loading.gif) no-repeat 50% 50%; 
 } 
#slider img { position:absolute; 
 top:0px; left:0px; display:none; 
 } 
#slider a { border:0; display:block; }

Para enlazar la funcionalidad del slider con la capa que hemos cargado previamente cuando cargamos la página, llamamos al método nivoSlider() de la siguiente forma:

<script type="text/javascript"> 
 $(window).load(function() { 
 $('#slider').nivoSlider(); 
 }); 
</script> 

Este método puede invocarse sin parámetros o bien con alguna de las opciones disponibles:

$('#slider').nivoSlider({
 effect:'random', // Efecto de transición: 'fold,fade,sliceDown'
 slices:15, // Para animaciones 'slice'
 boxCols: 8, // Para animaciones 'box'
 boxRows: 4, // Para animaciones 'box'
 animSpeed:500, // Velocidad de la transición
 pauseTime:3000, // Cuánto tiempo en milisegundos se visualiza una imagen
 startSlide:0, // Imagen de comienzo (empezando por cero)
 directionNav:true, // Si queremos que aparezcan controles para siguiente y anterior
 directionNavHide:true, // Sólo cuando el cursor se sitúa sobre el componente
                            se visualizará la navegación
 controlNav:true, // 1,2,3... navegación
 controlNavThumbs:false, // Usar miniaturas para el control de la navegación
 controlNavThumbsFromRel:false, // Usar imagen rel para miniaturas
 controlNavThumbsSearch: '.jpg', // Reemplazar este patrón del nombre de la imagen...
 controlNavThumbsReplace: '_thumb.jpg', // ...con esto para las imágenes miniatura
 keyboardNav:true, // Usar las flechas izquierda y derecha para navegación
 pauseOnHover:true, // Parar navegación al pasar el ratón sobre el componente
 manualAdvance:false, // Forzar transiciones manuales
 captionOpacity:0.8, // Opacidad para los caption o títulos de las imágenes
 prevText: 'Ant', // Texto de navegación hacia la izquierda
 nextText: 'Sig', // Texto de navegación hacia la derecha
 beforeChange: function(){}, // Función que se ejecuta antes de una transición
 afterChange: function(){}, // Función que se ejecuta después de una transición
 slideshowEnd: function(){}, // Función que se ejecuta después de que todas
                                las imágenes se han mostrado
 lastSlide: function(){}, // Función que se ejecuta cuando la última imagen se visualiza
 afterLoad: function(){} // Función que se ejecuta cuando se carga el componente
});

 

Hay gran variedad de efectos para las transiciones. Los valores posibles para la opción effect son: sliceDown, sliceDownLeft, sliceUp, sliceUpLeft, sliceUpDown, sliceUpDownLeft, fold, fade, random, slideInRight, slideInLeft, boxRandom, boxRain, boxRainReverse,boxRainGrow, boxRainGrowReverse. Para un uso avanzado, incluir Nivo Slider en WordPress o el uso de imágenes miniatura, podemos visitar la página oficial http://nivo.dev7studios.com/.