Cómo admitir el atributo de marcador de posición en IE8 y 9

Tengo un pequeño problema, el placeholderatributo para cuadros de entrada no es compatible con IE 8-9.

¿Cuál es la mejor manera de hacer este soporte en mi proyecto (ASP Net)? Estoy usando jQuery. ¿Necesito usar otras herramientas externas para ello?

¿Es http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html una buena solución?

Puede usar este complemento jQuery: https://github.com/mathiasbynens/jquery-placeholder

Pero su enlace también parece ser una buena solución.

Puede usar cualquiera de estos polyfills:

• https://github.com/jamesallardice/Placeholders.js (no admite campos de contraseña)
• https://github.com/chemerisuk/better-placeholder-polyfill

Estos scripts agregarán soporte para el placeholderatributo en los navegadores que no lo admiten, ¡y no requieren jQuery!

el $ browser.msie no está en la última jQuery ya ... usted tiene que utilizar el $ .support

como abajo:

 <script>

     (function ($) {
         $.support.placeholder = ('placeholder' in document.createElement('input'));
     })(jQuery);


     //fix for IE7 and IE8
     $(function () {
         if (!$.support.placeholder) {
             $("[placeholder]").focus(function () {
                 if ($(this).val() == $(this).attr("placeholder")) $(this).val("");
             }).blur(function () {
                 if ($(this).val() == "") $(this).val($(this).attr("placeholder"));
             }).blur();

             $("[placeholder]").parents("form").submit(function () {
                 $(this).find('[placeholder]').each(function() {
                     if ($(this).val() == $(this).attr("placeholder")) {
                         $(this).val("");
                     }
                 });
             });
         }
     });
 </script>

si usas jquery puedes hacer así. de este sitio Marcador de posición con Jquery

$('[placeholder]').parents('form').submit(function() {
  $(this).find('[placeholder]').each(function() {
    var input = $(this);
    if (input.val() == input.attr('placeholder')) {
      input.val('');
    }
  })
});

estos son los enlaces alternativos

1. Biblioteca jquery de marcador de posición
2. Rellenos múltiples HTML5 : vaya a la sección de marcador de posición

Tuve problemas de compatibilidad con varios complementos que probé, esta me parece la forma más sencilla de admitir marcadores de posición en las entradas de texto:

function placeholders(){
    //On Focus
    $(":text").focus(function(){
        //Check to see if the user has modified the input, if not then remove the placeholder text
        if($(this).val() == $(this).attr("placeholder")){
            $(this).val("");
        }
    });

    //On Blur
    $(":text").blur(function(){
        //Check to see if the use has modified the input, if not then populate the placeholder back into the input
        if( $(this).val() == ""){
            $(this).val($(this).attr("placeholder"));
        }
    });
}

$(function(){    
    if($.browser.msie && $.browser.version <= 9){
        $("[placeholder]").focus(function(){
            if($(this).val()==$(this).attr("placeholder")) $(this).val("");
        }).blur(function(){
            if($(this).val()=="") $(this).val($(this).attr("placeholder"));
        }).blur();

        $("[placeholder]").parents("form").submit(function() {
            $(this).find('[placeholder]').each(function() {
                if ($(this).val() == $(this).attr("placeholder")) {
                    $(this).val("");
                }
            })
        });
    }
});

prueba esto

Yo uso esto, es solo Javascript.

Simplemente tengo un elemento de entrada con un valor, y cuando el usuario hace clic en el elemento de entrada, lo cambia a un elemento de entrada sin valor.

Puede cambiar fácilmente el color del texto usando CSS. El color del marcador de posición es el color en la identificación #IEinput, y el color que será el texto escrito será el color en la identificación #email. ¡No use getElementsByClassName, porque las versiones de IE que no admiten un marcador de posición, tampoco admiten getElementsByClassName!

Puede usar un marcador de posición en una entrada de contraseña configurando el tipo de entrada de contraseña original en texto.

Gitano: http://tinker.io/4f7c5/1 - ¡Los servidores JSfiddle están caídos!

*Perdón por mi mal ingles

JAVASCRIPT

function removeValue() {
    document.getElementById('mailcontainer')
        .innerHTML = "<input id=\"email\" type=\"text\" name=\"mail\">";
    document.getElementById('email').focus(); }

HTML

<span id="mailcontainer">
    <input id="IEinput" onfocus="removeValue()" type="text" name="mail" value="mail">
</span>

Para otros que aterrizan aquí. Esto es lo que funcionó para mí:

//jquery polyfill for showing place holders in IE9
$('[placeholder]').focus(function() {
    var input = $(this);
    if (input.val() == input.attr('placeholder')) {
        input.val('');
        input.removeClass('placeholder');
    }
}).blur(function() {
    var input = $(this);
    if (input.val() == '' || input.val() == input.attr('placeholder')) {
        input.addClass('placeholder');
        input.val(input.attr('placeholder'));
    }
}).blur();

$('[placeholder]').parents('form').submit(function() {
    $(this).find('[placeholder]').each(function() {
        var input = $(this);
        if (input.val() == input.attr('placeholder')) {
            input.val('');
        }
    })
});

Simplemente agregue esto en su archivo script.js. Cortesía de http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html

Dado que la mayoría de las soluciones usan jQuery o no son tan satisfactorias como deseaba, escribí un fragmento para mí para los mootools.

function fix_placeholder(container){
    if(container == null) container = document.body;

    if(!('placeholder' in document.createElement('input'))){

        var inputs = container.getElements('input');
        Array.each(inputs, function(input){

            var type = input.get('type');

            if(type == 'text' || type == 'password'){

                var placeholder = input.get('placeholder');
                input.set('value', placeholder);
                input.addClass('__placeholder');

                if(!input.hasEvent('focus', placeholder_focus)){
                    input.addEvent('focus', placeholder_focus);
                }

                if(!input.hasEvent('blur', placeholder_blur)){
                    input.addEvent('blur', placeholder_blur);
                }

            }

        });

    }
}

function placeholder_focus(){

    var input = $(this);    

    if(input.get('class').contains('__placeholder') || input.get('value') == ''){
        input.removeClass('__placeholder');
        input.set('value', '');
    }

}

function placeholder_blur(){

    var input = $(this);    

    if(input.get('value') == ''){
        input.addClass('__placeholder');
        input.set('value', input.get('placeholder'));
    }

}

Confieso que se ve un poco más MÁS que otros, pero funciona bien. __ marcador de posición es una clase ccs para hacer que el color del texto del marcador de posición sea elegante.

Usé el fix_placeholder en window.addEvent ('domready', ... y para cualquier código agregado adicionalmente como ventanas emergentes.

Espero que te guste.

Saludos cordiales.

Usé el código de este enlace http://dipaksblogonline.blogspot.com/2012/02/html5-placeholder-in-ie7-and-ie8-fixed.html

Pero en la detección del navegador usé:

if (navigator.userAgent.indexOf('MSIE') > -1) {
 //Your placeholder support code here...
}

<input type="text" name="Name" value="Name" onfocus="this.value = ''" onblur=" if(this.value = '') { value = 'Name'}" />

Agregue el código a continuación y se hará.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script src="https://code.google.com/p/jquery-placeholder-js/source/browse/trunk/jquery.placeholder.1.3.min.js?r=6"></script>
    <script type="text/javascript">
        // Mock client code for testing purpose
        $(function(){
            // Client should be able to add another change event to the textfield
            $("input[name='input1']").blur(function(){ alert("Custom event triggered."); });    
            // Client should be able to set the field's styles, without affecting place holder
            $("textarea[name='input4']").css("color", "red");

            // Initialize placeholder
            $.Placeholder.init();

            // or try initialize with parameter
            //$.Placeholder.init({ color : 'rgb(255, 255, 0)' });

            // call this before form submit if you are submitting by JS
            //$.Placeholder.cleanBeforeSubmit();
        });
    </script>

Descargue el código completo y la demostración desde https://code.google.com/p/jquery-placeholder-js/downloads/detail?name=jquery.placeholder.1.3.zip

Aquí hay una función de JavaScript que creará marcadores de posición para IE 8 y posteriores y también funciona para las contraseñas:

/* 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>

    <script>
        if ($.browser.msie) {
            $('input[placeholder]').each(function() {

                var input = $(this);

                $(input).val(input.attr('placeholder'));

                $(input).focus(function() {
                    if (input.val() == input.attr('placeholder')) {
                        input.val('');
                    }
                });

                $(input).blur(function() {
                    if (input.val() == '' || input.val() == input.attr('placeholder')) {
                        input.val(input.attr('placeholder'));
                    }
                });
            });
        }
        ;
    </script>