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


132

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?


77
Rincón del pedante: es un atributo, no una etiqueta. Una etiqueta tiene corchetes puntiagudos alrededor (como <input>); un atributo es un par clave-valor dentro de los corchetes puntiagudos (como placeholder="This is an attribute value"). Dejando la pregunta como está, para que las futuras personas que hagan la misma pregunta puedan encontrarla.
Paul D. Waite

2
Ese enlace no funcionó como está. Eliminé las comillas adicionales alrededor del selector $ ("[marcador de posición]") y estuvo bien.
claptimes

1
La solución en ese enlace tampoco maneja cuadros de contraseña según el soporte nativo en webkit
geedubb

1
El enlace que proporcionó funciona muy bien, aparte de las contraseñas, es una delicia y no podría ser más fácil de configurar
hobailey

1
el enlace es una gran solución
Pixelomo

Respuestas:


89

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

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


2
El enlace sugerido en la pregunta no funcionó para mí; tuvo problemas con el envío del formulario. La solución que ha sugerido en esta respuesta parece mucho más robusta y funcionó de maravilla.
Jonny White

En realidad, probé este y funciona bien, pero tan pronto como estoy cargando una caja de luz con un formulario y un campo de contraseña, todo funciona pero no el campo de contraseña, está vacío.
Jurik

66
en mi marcador de posición de contraseña IE8 está en puntos
Mladen Janjetovic

Tampoco puedo verlo en ie8. Trabajé alrededor de esto simplemente mostrando algo de texto sobre los campos cuando en ie8.
jhawes

jQuery-placeholder se comporta de manera diferente. Elimina el marcador de posición en foco en lugar de cuando el usuario comienza a escribir algo en el campo como el comportamiento normal en Firefox para marcadores de posición.
supertonsky

89

Puede usar cualquiera de estos polyfills:

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


44
Voté esto porque me encanta la idea de una solución que no sea jquery, pero en este momento este código tiene problemas en IE8, por lo que no es adecuado para mí. github.com/jamesallardice/Placeholders.js/issues/17
Dan Searle

3
Esta solución no maneja cajas de contraseña
Jurik

2
@ Jurik He agregado un polyfill adicional, espero que ayude.
starbeamrainbowlabs

1
Incluso el distribuidor de este complemento dice que este complemento no maneja los campos de contraseña en <IE9 github.com/jamesallardice/Placeholders.js/issues/…
Jurik

El campo de contraseña todavía no funciona en iE8. El enlace de respuesta aceptado parece funcionar en ie8 para el campo de contraseña.
Susie

24

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>

2
esto funciona de
maravilla

@vsync no, si lees bien, dije plugins, plural, la mayoría de las opciones que he encontrado necesitas usar múltiples archivos, con toneladas de código, frente a pocas líneas. no eres un poco arrogante, y cómo ese comentario mejora la respuesta
LemonCool

Esto realmente no debería usarse. Esto es para uso interno de jQuery y podría eliminarse en cualquier momento. api.jquery.com/category/deprecated/deprecated-1.9
Será el

3

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

3
Esta respuesta funciona, pero debe seguir el enlace para ver la funcionalidad completa. El código aquí solo no funcionará.
Hawkee

1
ofc no funcionará, ¡este es un código de ridículo! ¿Por qué vincula una y otra vez la misma "forma" para el submitevento? ¿Qué tiene que ver el evento de envío con nada
vsync

¿Qué sucederá si escribo el mismo texto que el texto del marcador de posición en IE8?
Bimal Das

3

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"));
        }
    });
}

¿Es compatible con IE9?
Viku

2
$(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


1

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>

3
El marcador de posición debería volver si el campo está vacío y se pierde el foco
Chris Pratt

1

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


0

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.



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

0

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


0

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>


-1
    <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>

$ .browser.msie ya no es compatible. Intente utilizar la detección de funciones en su lugar.
Invot
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.