Espaços reservados de entrada para o Internet Explorer


175

O HTML5 introduziu o placeholderatributo nos inputelementos, o que permite exibir um texto padrão acinzentado.

Infelizmente, o Internet Explorer, incluindo o IE 9, não o suporta.

Já existem alguns scripts de simulador de espaço reservado. Eles normalmente funcionam colocando o texto padrão no campo de entrada, dando uma cor cinza e removendo-o novamente assim que você focaliza o campo de entrada.

A desvantagem dessa abordagem é que o texto do espaço reservado está no campo de entrada. Portanto:

  1. scripts não podem verificar facilmente se um campo de entrada está vazio
  2. o processamento no servidor deve verificar o valor padrão, para não inserir o espaço reservado no banco de dados.

Eu gostaria de ter uma solução em que o texto do espaço reservado não esteja na entrada em si.

Respostas:


151

Ao examinar a seção "Formulários da Web: espaço reservado de entrada" dos Polyfills entre navegadores HTML5 , um deles foi o jQuery-html5-placeholder .

Eu experimentei a demonstração com o IE9 e parece que ela envolve o seu <input>espaço e sobrepõe um rótulo ao texto do espaço reservado.

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

Também existem outros calços por lá, mas não olhei para todos eles. Um deles, Placeholders.js , se anuncia como "Sem dependências (portanto, não é necessário incluir o jQuery, ao contrário da maioria dos scripts de polyfill de espaço reservado)".

Edit: Para aqueles mais interessados ​​em "como" que "o quê", como criar um polyfill de espaço reservado HTML5 avançado que percorre o processo de criação de um plug-in jQuery que faz isso.

Além disso, consulte manter o espaço reservado no foco no IE10 para obter comentários sobre como o texto do espaço reservado desaparece no foco no IE10, que difere do Firefox e do Chrome. Não tenho certeza se existe uma solução para esse problema.


2
Funcionou bem para mim no IE7, IE8 e IE9.
Mark Rummel

2
Esse plug-in não é mais mantido e possui muitos problemas conhecidos.
Ian Dunn

13
Voto negativo? A resposta continha um link para outros calços. Atualizado para incluir um não-jQuery.
Kevin Hakanson

A página do plugin no github não existe mais. Aqui está outro .

1
Não é um fã muito grande que faz com que a entrada seja modificada, recomendo olhar a resposta de Nick abaixo. ele usa uma sobreposição transparente em vez de modificar o valor da entrada
Nathan Tregillus

38

O melhor da minha experiência é https://github.com/mathiasbynens/jquery-placeholder (recomendado por html5please.com ). http://afarkas.github.com/webshim/demos/index.html também possui uma boa solução entre sua muito mais extensa biblioteca de polyfills.


3
Marque com +1 isso sobre o espaço reservado jQuery-html5. Este parece um agradável muito e alças alguns casos extremos perdidas pelo outro (por exemplo, campos ocultos)
andygeers

2
Devo dizer que desta vez o StackOverflow forneceu um mau conselho. O Placeholder do jQuery não limpa a entrada quando você clica no IE.
firedev

12

Com uma implementação do jQuery, você pode facilmente remover os valores padrão na hora de enviar. Abaixo está um exemplo:

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

});

Sei que você está procurando uma sobreposição, mas talvez prefira a facilidade dessa rota (agora sabendo o que escrevi acima). Nesse caso, escrevi isso para meus próprios projetos e funciona muito bem (requer jQuery) e leva apenas alguns minutos para ser implementado em todo o site. Ele oferece texto em cinza a princípio, cinza claro quando em foco e preto ao digitar. Ele também oferece o texto do espaço reservado sempre que o campo de entrada estiver vazio.

Primeiro, configure seu formulário e inclua seus atributos de espaço reservado nas tags de entrada.

<input placeholder="enter your email here">

Apenas copie esse código e salve-o 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 em apenas uma entrada

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

É assim que eu recomendo que você o implemente em todos os campos de entrada do seu site quando o navegador não suporta atributos de espaço reservado 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();
      });
  });
} 

Poderia, por favor, criar um violino / demo para o acima, vai me ajudar e futuro visualizador também.
user2086641

Suporta campo de senha.
user2681579

6

Depois de tentar algumas sugestões e ver os problemas no IE, aqui está o que funciona:

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

O que eu gostei - você apenas inclui o arquivo js. Não há necessidade de iniciá-lo ou qualquer coisa.


Depois de usar esse espaço reservado, ele está funcionando bem, ou seja, mas se houver algum erro no formulário, ao exibir o erro do formulário, o texto do espaço reservado fica desalinhado do campo de entrada, tentei resolver, mas não consigo. .
user2681579

Eu realmente gosto deste melhor que as versões de modificação de valor. Desejo que a versão html5 dos marcadores funcione dessa maneira também! (ou seja, deixar o espaço reservado até que algum texto seja inserido, em vez de perder o valor do foco) #
Nathan Tregillus

4
  • Funciona apenas para IE9 +

A solução a seguir liga-se à entrada de elementos de texto com o atributo placeholder. Emula um comportamento de espaço reservado apenas para o IE e limpa o campo de valor da entrada no envio, se não for alterado.

Adicione esse script e o IE parece oferecer suporte a espaços reservados 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('');
        }
      });
    });
  }
});

1
Muitos usuários ainda usam o IE8 e alguns até o IE7. Então, eu não iria para isso, se ele não apoiá-los
RZR

4

Eu sugiro uma função simples:

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

    element.blur();
}

E para usá-lo, chame-o desta maneira:

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


2

Você pode 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);

2

Simples assim:

$(function() {
    ...

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

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

    ...
});


1

Eu vim com um script JQuery de espaço reservado simples que permite uma cor personalizada e usa um comportamento diferente de limpar entradas quando focado. Ele substitui o espaço reservado padrão no Firefox e Chrome e adiciona suporte ao 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');
            }
        });
    });
});

solução perfeita, mas você tem um erro (this) .attr ('tooltip', $ (this) .attr ('placeholder')); // buffer altera esta linha para $ (this) .attr ('tooltip', $ (this) .attr ('placeholder')); // buffer
angel.bonev

0

Placeholdr é um polyfill de jQuery de marcador de espaço super leve que eu escrevi. É menos de 1 KB minificado.

Assegurei-me de que esta biblioteca abordasse suas duas preocupações:

  1. O Placeholdr estende a função jQuery $ .fn.val () para evitar valores de retorno inesperados quando o texto está presente nos campos de entrada como resultado do Placeholdr. Portanto, se você se ater à API do jQuery para acessar os valores dos seus campos, não precisará alterar nada.

  2. O espaço reservado ouve os envios de formulário e remove o texto do espaço reservado dos campos para que o servidor simplesmente veja um valor vazio.

Novamente, meu objetivo com o Placeholdr é fornecer uma solução simples para o problema do espaço reservado. Entre em contato no Github se houver mais alguma coisa que você gostaria de ter no suporte do Placeholdr.


0

Para inserir o plug-in e verificar se o ie é perfeitamente funcionadojquery.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>

0

Aqui está uma função javascript pura (não é necessário o jquery) que criará espaços reservados para o IE 8 e abaixo e também funcionará para senhas. Ele lê o atributo de espaço reservado HTML5 e cria um elemento de abrangência por trás do elemento do formulário e torna transparente o plano de fundo do elemento do formulário:

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


0

NOTA: o autor deste polyfill afirma que "funciona em praticamente qualquer navegador que você possa imaginar", mas de acordo com os comentários que não são verdadeiros para o IE11, no entanto, o IE11 tem suporte nativo, assim como a maioria dos navegadores modernos

O Placeholders.js é o melhor polyfill de espaço reservado que eu já vi, é leve, não depende do JQuery, cobre outros navegadores mais antigos (não apenas o IE) e tem opções para espaços reservados para ocultar na entrada e executar uma vez.


1
O @Niclas IE9 e superior tem seu próprio suporte nativo para espaços reservados.
Hexodus 29/02

Adicionei uma observação a esta resposta com um link para caniuse para espaços reservados.
Dave Everitt 27/05

-1

eu uso jquery.placeholderlabels . É baseado nisso e pode ser demonstrado aqui .

trabalha em ie7, ie8, ie9.

O comportamento imita o comportamento atual do firefox e chrome - onde o texto "espaço reservado" permanece visível no foco e só desaparece quando algo é digitado no campo.


-1

Criei meu próprio plugin jQuery depois de ficar frustrado com o fato de os calços existentes ocultarem o espaço reservado, o que cria uma experiência de usuário inferior e também não corresponde à maneira como o Firefox, Chrome e Safari lidam com isso. Esse é especialmente o caso se você deseja que uma entrada seja focada quando uma página ou pop-up é carregada pela primeira vez, enquanto ainda mostra o espaço reservado até a inserção do texto.

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

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.