Marcadores de posición de entrada para Internet Explorer

HTML5 introdujo el placeholderatributo en los inputelementos, lo que permite mostrar un texto predeterminado atenuado.

Lamentablemente, Internet Explorer, incluido IE 9, no lo admite.

Ya hay algunos scripts de simulador de marcador de posición por ahí. Por lo general, funcionan colocando el texto predeterminado en el campo de entrada, le dan un color gris y lo eliminan nuevamente tan pronto como enfoca el campo de entrada.

El inconveniente de este enfoque es que el texto del marcador de posición está en el campo de entrada. Así:

1. los scripts no pueden verificar fácilmente si un campo de entrada está vacío
2. el procesamiento del lado del servidor debe verificar el valor predeterminado para no insertar el marcador de posición en la base de datos.

Me gustaría tener una solución, donde el texto del marcador de posición no está en la entrada en sí.

Al mirar la sección "Formularios web: marcador de posición de entrada" de HTML5 Cross Browser Polyfills , vi que jQuery-html5-placeholder .

Probé la demostración con IE9, y parece que te envuelve <input>con un espacio y superpone una etiqueta con el texto del marcador de posición.

<label>Text:
  <span style="position: relative;">
    <input id="placeholder1314588474481" name="text" maxLength="6" type="text" placeholder="Hi Mom">
    <label style="font: 0.75em/normal sans-serif; left: 5px; top: 3px; width: 147px; height: 15px; color: rgb(186, 186, 186); position: absolute; overflow-x: hidden; font-size-adjust: none; font-stretch: normal;" for="placeholder1314588474481">Hi Mom</label>
  </span>
</label>

También hay otras cuñas allí, pero no las miré a todas. Uno de ellos, Placeholders.js , se anuncia a sí mismo como "Sin dependencias (por lo que no es necesario incluir jQuery, a diferencia de la mayoría de los scripts de polyfill de marcador de posición)".

Editar: Para aquellos más interesados ​​en "cómo" ese "qué", Cómo crear un polyfill de marcador de posición HTML5 avanzado que explica el proceso de creación de un complemento jQuery que hace esto.

Además, vea mantener el marcador de posición enfocado en IE10 para comentarios sobre cómo desaparece el texto del marcador de posición enfocado con IE10, que difiere de Firefox y Chrome. No estoy seguro si hay una solución para este problema.

El mejor en mi experiencia es https://github.com/mathiasbynens/jquery-placeholder (recomendado por html5please.com ). http://afarkas.github.com/webshim/demos/index.html también tiene una buena solución entre su biblioteca mucho más extensa de polyfills.

Con una implementación de jQuery, puede eliminar FÁCILMENTE los valores predeterminados cuando llegue el momento de enviar. A continuación se muestra un ejemplo:

$('#submit').click(function(){
   var text = this.attr('placeholder');
   var inputvalue = this.val();  // you need to collect this anyways
   if (text === inputvalue) inputvalue = "";

   // $.ajax(...  // do your ajax thing here

});

Sé que está buscando una superposición, pero es posible que prefiera la facilidad de esta ruta (ahora sabiendo lo que escribí anteriormente). Si es así, escribí esto para mis propios proyectos y funciona muy bien (requiere jQuery) y toma solo un par de minutos para implementarlo en todo su sitio. Al principio, ofrece texto gris, gris claro cuando está enfocado y negro cuando escribe. También ofrece el texto del marcador de posición siempre que el campo de entrada esté vacío.

Primero configure su formulario e incluya sus atributos de marcador de posición en las etiquetas de entrada.

<input placeholder="enter your email here">

Simplemente copie este código y guárdelo como placeholder.js.

(function( $ ){

   $.fn.placeHolder = function() {  
      var input = this;
      var text = input.attr('placeholder');  // make sure you have your placeholder attributes completed for each input field
      if (text) input.val(text).css({ color:'grey' });
      input.focus(function(){  
         if (input.val() === text) input.css({ color:'lightGrey' }).selectRange(0,0).one('keydown', function(){     
            input.val("").css({ color:'black' });  
         });
      });
      input.blur(function(){ 
         if (input.val() == "" || input.val() === text) input.val(text).css({ color:'grey' }); 
      }); 
      input.keyup(function(){ 
        if (input.val() == "") input.val(text).css({ color:'lightGrey' }).selectRange(0,0).one('keydown', function(){
            input.val("").css({ color:'black' });
        });               
      });
      input.mouseup(function(){
        if (input.val() === text) input.selectRange(0,0); 
      });   
   };

   $.fn.selectRange = function(start, end) {
      return this.each(function() {
        if (this.setSelectionRange) { this.setSelectionRange(start, end);
        } else if (this.createTextRange) {
            var range = this.createTextRange();
            range.collapse(true); 
            range.moveEnd('character', end); 
            range.moveStart('character', start); 
            range.select(); 
        }
      });
   };

})( jQuery );

Para usar en una sola entrada

$('#myinput').placeHolder();  // just one

Así es como recomiendo que lo implemente en todos los campos de entrada en su sitio cuando el navegador no admite atributos de marcador de posición HTML5:

var placeholder = 'placeholder' in document.createElement('input');  
if (!placeholder) {      
  $.getScript("../js/placeholder.js", function() {   
      $(":input").each(function(){   // this will work for all input fields
        $(this).placeHolder();
      });
  });
} 

Después de probar algunas sugerencias y ver problemas en IE, este es el que funciona:

https://github.com/parndt/jquery-html5-placeholder-shim/

Lo que me ha gustado: solo incluye el archivo js. No es necesario iniciarlo ni nada.

• Funciona solo para IE9 +

La siguiente solución se une a los elementos de texto de entrada con el atributo de marcador de posición. Emula un comportamiento de marcador de posición solo para IE y borra el campo de valor de la entrada al enviar si no se cambia.

Agregue este script e IE parecería admitir marcadores de posición HTML5.

  $(function() {
  //Run this script only for IE
  if (navigator.appName === "Microsoft Internet Explorer") {
    $("input[type=text]").each(function() {
      var p;
     // Run this script only for input field with placeholder attribute
      if (p = $(this).attr('placeholder')) {
      // Input field's value attribute gets the placeholder value.
        $(this).val(p);
        $(this).css('color', 'gray');
        // On selecting the field, if value is the same as placeholder, it should become blank
        $(this).focus(function() {
          if (p === $(this).val()) {
            return $(this).val('');
          }
        });
         // On exiting field, if value is blank, it should be assigned the value of placeholder
        $(this).blur(function() {
          if ($(this).val() === '') {
            return $(this).val(p);
          }
        });
      }
    });
    $("input[type=password]").each(function() {
      var e_id, p;
      if (p = $(this).attr('placeholder')) {
        e_id = $(this).attr('id');
        // change input type so that the text is displayed
        document.getElementById(e_id).type = 'text';
        $(this).val(p);
        $(this).focus(function() {
          // change input type so that password is not displayed
          document.getElementById(e_id).type = 'password';
          if (p === $(this).val()) {
            return $(this).val('');
          }
        });
        $(this).blur(function() {
          if ($(this).val() === '') {
            document.getElementById(e_id).type = 'text';
            $(this).val(p);
          }
        });
      }
    });
    $('form').submit(function() {
      //Interrupt submission to blank out input fields with placeholder values
      $("input[type=text]").each(function() {
        if ($(this).val() === $(this).attr('placeholder')) {
          $(this).val('');
        }
      });
     $("input[type=password]").each(function() {
        if ($(this).val() === $(this).attr('placeholder')) {
           $(this).val('');
        }
      });
    });
  }
});

Te sugiero una función simple:

function bindInOut(element,value)
{
    element.focus(function()
    {
        if(element.val() == value) element.val('');         
    }).
    blur(function()
    {
        if(element.val() == '') element.val(value);
    });

    element.blur();
}

Y para usarlo, llámalo de esta manera:

bindInOut($('#input'),'Here your value :)');

Encontré una solución bastante simple usando este método:

http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html

es un truco de jquery, y funcionó perfectamente en mis proyectos

Puedes usar :

var placeholder = 'search  here';

$('#search').focus(function(){
    if ($.trim($(this).val()) ===  placeholder){
        this.value ='';
    }
}).blur(function(){
    if ($.trim($(this).val()) ===  ''){
        this.value = placeholder;
    }
}).val(placeholder);

Simple como este:

$(function() {
    ...

    var element = $("#selecter")
    if(element.val() === element.attr("placeholder"){

        element.text("").select().blur();
    }

    ...
});

He escrito un complemento jquery para resolver este problema ... es gratis ...

Directorio JQuery:

http://plugins.jquery.com/project/kegles-jquery-placeholder

Sitio: www.kegles.com.br/jquery-placeholder/

Se me ocurrió un script JQuery de marcador de posición simple que permite un color personalizado y utiliza un comportamiento diferente de borrar entradas cuando se enfoca. Reemplaza el marcador de posición predeterminado en Firefox y Chrome y agrega soporte para IE8.

// placeholder script IE8, Chrome, Firefox
// usage: <input type="text" placeholder="some str" />
$(function () { 
    var textColor = '#777777'; //custom color

    $('[placeholder]').each(function() {
        (this).attr('tooltip', $(this).attr('placeholder')); //buffer

        if ($(this).val() === '' || $(this).val() === $(this).attr('placeholder')) {
            $(this).css('color', textColor).css('font-style','italic');
            $(this).val($(this).attr('placeholder')); //IE8 compatibility
        }

        $(this).attr('placeholder',''); //disable default behavior

        $(this).on('focus', function() {
            if ($(this).val() === $(this).attr('tooltip')) {
                $(this).val('');
            }
        });

        $(this).on('keydown', function() {
            $(this).css('font-style','normal').css('color','#000');
        });

        $(this).on('blur', function() {
            if ($(this).val()  === '') {
                $(this).val($(this).attr('tooltip')).css('color', textColor).css('font-style','italic');
            }
        });
    });
});

Placeholdr es un marcador de posición jQuery polyfill superligero que escribí. Es menos de 1 KB minificado.

Me aseguré de que esta biblioteca aborde sus dos preocupaciones:

1. Placeholdr extiende la función jQuery $ .fn.val () para evitar valores de retorno inesperados cuando el texto está presente en los campos de entrada como resultado de Placeholdr. Entonces, si te quedas con la API jQuery para acceder a los valores de tus campos, no necesitarás cambiar nada.

2. Placeholdr escucha los envíos de formularios, y elimina el texto del marcador de posición de los campos para que el servidor simplemente vea un valor vacío.

Nuevamente, mi objetivo con Placeholdr es proporcionar una solución sencilla para el problema del marcador de posición. Avíseme en Github si hay algo más que le interesaría tener soporte de Placeholdr.

PARA insertar el complemento y verificar que el ie funciona perfectamente jquery.placeholder.js

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="jquery.placeholder.js"></script>
    <script>
        // To test the @id toggling on password inputs in browsers that don’t support changing an input’s @type dynamically (e.g. Firefox 3.6 or IE), uncomment this:
        // $.fn.hide = function() { return this; }
        // Then uncomment the last rule in the <style> element (in the <head>).
        $(function() {
            // Invoke the plugin
            $('input, textarea').placeholder({customClass:'my-placeholder'});
            // That’s it, really.
            // Now display a message if the browser supports placeholder natively
            var html;
            if ($.fn.placeholder.input && $.fn.placeholder.textarea) {
                html = '<strong>Your current browser natively supports <code>placeholder</code> for <code>input</code> and <code>textarea</code> elements.</strong> The plugin won’t run in this case, since it’s not needed. If you want to test the plugin, use an older browser ;)';
            } else if ($.fn.placeholder.input) {
                html = '<strong>Your current browser natively supports <code>placeholder</code> for <code>input</code> elements, but not for <code>textarea</code> elements.</strong> The plugin will only do its thang on the <code>textarea</code>s.';
            }
            if (html) {
                $('<p class="note">' + html + '</p>').insertAfter('form');
            }
        });
    </script>

Aquí hay una función javascript pura (no se necesita jquery) que creará marcadores de posición para IE 8 y posteriores y también funciona para contraseñas. Lee el atributo de marcador de posición HTML5 y crea un elemento span detrás del elemento de formulario y hace que el fondo del elemento de formulario sea transparente:

/* Function to add placeholders to form elements on IE 8 and below */
function add_placeholders(fm) {	
	for (var e = 0; e < document.fm.elements.length; e++) {
		if (fm.elements[e].placeholder != undefined &&
		document.createElement("input").placeholder == undefined) { // IE 8 and below					
			fm.elements[e].style.background = "transparent";
			var el = document.createElement("span");
			el.innerHTML = fm.elements[e].placeholder;
			el.style.position = "absolute";
			el.style.padding = "2px;";
			el.style.zIndex = "-1";
			el.style.color = "#999999";
			fm.elements[e].parentNode.insertBefore(el, fm.elements[e]);
			fm.elements[e].onfocus = function() {
					this.style.background = "yellow";	
			}
			fm.elements[e].onblur = function() {
				if (this.value == "") this.style.background = "transparent";
				else this.style.background = "white";	
			}		
		} 
	}
}

add_placeholders(document.getElementById('fm'))

<form id="fm">
  <input type="text" name="email" placeholder="Email">
  <input type="password" name="password" placeholder="Password">
  <textarea name="description" placeholder="Description"></textarea>
</form>

NOTA: el autor de este polyfill afirma que "funciona en casi cualquier navegador que pueda imaginar", pero de acuerdo con los comentarios que no es cierto para IE11, sin embargo, IE11 tiene soporte nativo, al igual que la mayoría de los navegadores modernos

Placeholders.js es el mejor polyfill de marcador de posición que he visto, es liviano, no depende de JQuery, cubre otros navegadores más antiguos (no solo IE) y tiene opciones para ocultar marcadores de posición de entrada y ejecución única.

Yo uso jquery.placeholderlabels . Se basa en esto y se puede mostrar aquí .

funciona en ie7, ie8, ie9.

El comportamiento imita el comportamiento actual de Firefox y Chrome, donde el texto del "marcador de posición" permanece visible en el foco y solo desaparece una vez que se escribe algo en el campo.

Creé mi propio complemento jQuery después de sentirme frustrado porque las cuñas existentes ocultarían el marcador de posición en foco, lo que crea una experiencia de usuario inferior y tampoco coincide con la forma en que Firefox, Chrome y Safari lo manejan. Este es especialmente el caso si desea que una entrada se enfoque cuando una página o ventana emergente se carga por primera vez, sin dejar de mostrar el marcador de posición hasta que se ingrese el texto.

https://github.com/nspady/jquery-placeholder-labels/