Espaços reservados de entrada para o Internet Explorer

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.

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.

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.

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

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.

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

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 :)');

Eu encontrei uma solução bastante simples usando este método:

http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html

é um hack jquery, e funcionou perfeitamente em meus projetos

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

Simples assim:

$(function() {
    ...

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

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

    ...
});

Eu escrevi um plugin jquery para resolver este problema .. é grátis ..

Diretório JQuery:

http://plugins.jquery.com/project/kegles-jquery-placeholder

Site: www.kegles.com.br/jquery-placeholder/

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

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.

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>

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>

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.

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.

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/