html5 - como - placeholder opacity

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

Question

Tengo un pequeño problema, el atributo placeholder 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 algunas otras herramientas externas para eso?

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

Answer 1

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 demo de https://code.google.com/p/jquery-placeholder-js/downloads/detail?name=jquery.placeholder.1.3.zip

Answer 2

Aquí hay una función de JavaScript que creará marcadores de posición para IE 8 y siguientes, 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>

Answer 3

Como la mayoría de las soluciones usan jQuery o no son tan satisfactorias como yo deseaba, escribí un fragmento para mí sobre 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 que otros, pero funciona bien. __placeholder es una clase de 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 añadido adicional como ventanas emergentes.

Espero que te guste.

Saludos cordiales.

Answer 4

Para otros aterrizando 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('''');
        }
    })
});

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

Answer 5

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

Estas secuencias de comandos agregarán soporte para el atributo de placeholder en los navegadores que no lo admiten y no requieren jQuery.

Answer 6

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

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

Answer 7

Solución simple

Hay una solución con CSS, simplemente ponga ese código en su archivo de estilo y todos los marcadores de posición funcionarán correctamente:

input.your-input-class: -ms-input-placeholder {    
    color: #000000; //Your font color
}

Answer 8

Tuve problemas de compatibilidad con varios complementos que probé, esta me parece ser 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"));
        }
    });
}

Answer 9

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 de navegador utilicé:

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

Answer 10

Yo uso thisone, 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 un valor.

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

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

Tinker: http://tinker.io/4f7c5/1 - ¡Los servidores de 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>

Answer 11

el $ .Browser.msie ya no está en el último JQuery ... tienes que usar $ .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>

Answer 12

si usas jquery puedes hacer esto. de este sitio http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html

$(''[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. Placeholder jquery library
2. Polyfills HTML5 : vaya a la sección de marcador de posición

Answer 13

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

Answer 14

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

Answer 15

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