IE9 marcador de posición HTML5: ¿cómo lo está logrando la gente?

Question

Estoy tratando de usar el atributo placeholder="xxx" en mi aplicación web, y no quiero tener una imagen especial para IE9. ¿Pueden las personas arrojar algunas buenas sugerencias para lograr esta funcionalidad en IE9?

He encontrado un par de enlaces aquí, pero ninguno de los scripts sugeridos era suficiente ... y las respuestas fueron a partir de mediados de 2011, así que pensé que tal vez hay una mejor solución por ahí. ¿Quizás con un plugin jQuery ampliamente adoptado? No quiero usar nada que requiera un código intrusivo, como requerir cierta clase de CSS o algo así.

Gracias.

EDIT - También necesito que esto funcione para los campos de entrada de contraseña.

// the below snippet should work, but isn't. 
$(document).ready(function() { 
    initPlaceholders()(); 
} 

function initPlaceholders() { 
     $.support.placeholder = false; 
var test = document.createElement('input'); 
if ('placeholder' in test) { 
    $.support.placeholder = true; 
    return function() { } 
} else { 
    return function() { 
     $(function() { 
      var active = document.activeElement; 
      $('form').delegate(':text, :password', 'focus', function() { 
       var _placeholder = $(this).attr('placeholder'), 
        _val = $(this).val(); 
       if (_placeholder != '' && _val == _placeholder) { 
        $(this).val('').removeClass('hasPlaceholder'); 
       } 
      }).delegate(':text, :password', 'blur', function() { 
       var _placeholder = $(this).attr('placeholder'), 
        _val = $(this).val(); 
       if (_placeholder != '' && (_val == '' || _val == _placeholder)) { 
        $(this).val(_placeholder).addClass('hasPlaceholder'); 
       } 
      }).submit(function() { 
       $(this).find('.hasPlaceholder').each(function() { $(this).val(''); }); 
      }); 
      $(':text, :password').blur(); 
      $(active).focus(); 
     }); 
    } 
} 
} 

Answer 1

Acabamos de investigar lo mismo. Decidimos reutilizar this gist, por Aaron McCall, después de hacer algunos cambios menores. La principal ventaja es que es simple, fácil de entender código:

1. Quite las partes kernel y setup_placeholders. Simplemente llámalo inmediatamente en una función anónima.

2. Agregar var antes test.

Para navegadores compatibles con placeholder, simplemente vuelve a eso. También maneja nuevos elementos de entrada (observe el uso de delegate) en formularios existentes. Pero no maneja elementos de forma dinámicos nuevos. Probablemente podría modificarse para hacerlo con jQuery.on.

Si no te gusta este, puedes usar uno de los here. Sin embargo, algunos de ellos son demasiado complicados o tienen decisiones de diseño cuestionables como setTimeout para detectar elementos nuevos.

Tenga en cuenta que es necesario utilizar dos pares de parens, ya que usted está llamando a una función anónima, a continuación, llamar a la función devuelta (esto podría ser un factor de forma diferente):

(function() { 
    // ... 
})()(); 

Answer 2

Aquí es un plugin de jQuery que trabaja con campos de contraseña también. No es tan pequeño como el código sugerido por Matthew, pero tiene algunas correcciones más. Lo he usado con éxito junto con H5Validate también.

http://webcloud.se/code/jQuery-Placeholder/

Answer 3

escribí un plugin de jQuery hace un tiempo que añade el apoyo marcador de posición para cualquier navegador que no es compatible y no hace nada en los que lo hacen.

Placeholder Plugin