Como dar suporte ao atributo placeholder no IE8 e 9


132

Eu tenho um pequeno problema, o placeholderatributo para caixas de entrada não é suportado no IE 8-9.

Qual é a melhor maneira de fazer esse suporte no meu projeto (ASP Net). Eu estou usando jQuery. Preciso usar outras ferramentas externas para isso?

Http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html é uma boa solução?


7
Canto do pedante: é um atributo, não uma etiqueta. Uma tag possui colchetes pontudos (como <input>); um atributo é um par de valores-chave dentro dos colchetes pontudos (como placeholder="This is an attribute value"). Deixando a questão como está, para que futuras pessoas que fazem a mesma pergunta possam encontrá-la.
Paul D. Waite

2
Esse link não funcionou como está. Eu removi as aspas extras ao redor do seletor $ ("[placeholder]") e estava tudo bem.
claptimes

1
A solução nesse link também não lidar com caixas de senha de acordo com suporte nativo no webkit
geedubb

1
O link que você deu trabalhos muito bem - para além de senhas trabalha um deleite e não poderia ser mais simples de configurar
hobailey

1
o link é uma ótima solução
Pixelomo

Respostas:


89

Você pode usar este plugin jQuery: https://github.com/mathiasbynens/jquery-placeholder

Mas o seu link também parece ser uma boa solução.


2
O link sugerido na pergunta não funcionou para mim; teve problemas com o envio do formulário. A solução que você sugeriu nesta resposta parece muito mais robusta e funcionou bem.
Jonny White

Na verdade, eu tentei esse aqui e funciona bem - mas assim que carrego uma mesa de luz com um formulário e um campo de senha, tudo funciona, mas não o campo de senha - está vazio.
Jurik 27/09/13

6
na minha senha IE8 espaço reservado é em pontos
Mladen Janjetovic

Eu também não consigo vê-lo no ie8. Eu trabalhei em torno disso apenas exibindo algum texto acima dos campos quando no ie8.
jhawes

O jQuery-placeholder se comporta de maneira diferente. Ele remove o espaço reservado no foco, em vez de quando o usuário começa a digitar algo no campo, como o comportamento normal no Firefox para espaços reservados.
Supertonsky

89

Você pode usar qualquer um destes polyfills:

Esses scripts adicionarão suporte ao placeholderatributo em navegadores que não o suportam e não requerem jQuery!


4
Votei isso de positivo porque adoro a idéia de uma solução não-jquery, mas agora esse código tem problemas no IE8, portanto não é adequado para mim. github.com/jamesallardice/Placeholders.js/issues/17
Dan Searle

3
Esta solução não lida com caixas de senhas
Jurik

2
@ Jurik eu adicionei um polyfill extra - espero que ajude.
Starbeamrainbowlabs # 26/13

1
Até o distribuidor deste plug-in diz que esse plug-in não lida com campos de senha em <IE9 github.com/jamesallardice/Placeholders.js/issues/…
Jurik

O campo da senha ainda não funciona no iE8. O link de resposta aceito parece funcionar no ie8 para o campo de senha.
31813 Susie

24

o $ .Browser.msie não está mais no JQuery mais recente ... você precisa usar o $ .support

como abaixo:

 <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
Isso funciona como um encanto, eu gosto melhor do que a adição de plugins, muito obrigado
LemonCool

@ vsync não, se você leu bem, eu disse plugins, plural, a maioria das opções que eu achei que você precisa usar vários arquivos, com toneladas de código, vs poucas linhas. você não é um pouco arrogante, e como esse comentário melhora a resposta
LemonCool

Isso realmente não deve ser usado. Isso é para uso interno do jQuery e pode ser removido a qualquer momento. api.jquery.com/category/deprecated/deprecated-1.9
Será

3

se você usa jquery, pode fazer assim. deste site Espaço reservado com Jquery

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

estes são os links alternativos

  1. Biblioteca jquery de espaço reservado
  2. Polyfills HTML5 - ir para a seção espaço reservado

3
Esta resposta funciona, mas você precisa seguir o link para obter a funcionalidade completa. O código aqui sozinho não funcionará.
Hawkee

1
ofc não vai funcionar, este é um código ridículo! por que você liga repetidamente a mesma "forma" para o submitevento? o que é que o evento submit tem a ver com qualquer coisa
vsync

o que acontecerá, se eu digitar o mesmo texto que no espaço reservado no IE8 ???
Bimal Das

3

Eu tive problemas de compatibilidade com vários plugins que tentei, esta parece ser a maneira mais simples de oferecer suporte a espaços reservados nas 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"));
        }
    });
}

é compatível com o IE9?
Viku 24/03/2015

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

tente isso


1

Eu uso este, é apenas Javascript.

Eu simplesmente tenho um elemento de entrada com um valor e, quando o usuário clica no elemento de entrada, ele é alterado para um elemento de entrada sem valor.

Você pode alterar facilmente a cor do texto usando CSS. A cor do espaço reservado é a cor no id #IEinput, e a cor do texto digitado será a cor no id #email. Não use getElementsByClassName, porque as versões do IE que não oferecem suporte a um espaço reservado, também não suportam getElementsByClassName!

Você pode usar um espaço reservado em uma entrada de senha, definindo o tipo da entrada de senha original como texto.

Tinker: http://tinker.io/4f7c5/1 - Os servidores JSfiddle estão inoperantes!

* desculpe pelo meu inglês ruim

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
Espaço reservado deve voltar se o campo está vazio e o foco é perdido
Chris Pratt

1

Para outros que desembarcam aqui. Isto é o que funcionou para mim:

//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('');
        }
    })
});

Basta adicionar isso no seu arquivo script.js. Cortesia de http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html


0

Como a maioria das soluções usa jQuery ou não é tão satisfatória quanto eu queria, escrevi um trecho para mim para 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'));
    }

}

Confesso que parece um pouco mais MAIS do que outros, mas funciona bem. __placeholder é uma classe ccs para deixar a cor do texto do espaço reservado.

Eu usei o fix_placeholder em window.addEvent ('domready', ... e para qualquer código adicionado adicionalmente, como pop-ups.

Espero que você goste.

Atenciosamente.



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

0

Adicione o código abaixo e será feito.

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

Faça o download do código completo e da demonstração em https://code.google.com/p/jquery-placeholder-js/downloads/detail?name=jquery.placeholder.1.3.zip


0

Aqui está uma função javascript que criará espaços reservados para o IE 8 e abaixo e também funciona para senhas:

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

O $ .browser.msie não é mais suportado. Tente usar a detecção de recursos.
invoque 7/08/14
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.