Espaço reservado no IE9

140

Parece que é um problema muito conhecido, mas todas as soluções que encontrei no Google não funcionam no meu IE9 recém-baixado.

Qual é a sua maneira favorita para ativar a Placeholderpropriedade nas tags inpute textarea?

Opcional: perdi muito tempo com isso e ainda não procurei a requiredpropriedade. Você também teria algum conselho para isso? Obviamente, posso verificar o valor em PHP, mas para ajudar o usuário, essa propriedade é muito conveniente.

chriscatfr
fonte
Estou de volta ao HTML depois de 4 anos. Ou seja, estou aberto a qualquer aconselhamento para substituir minhas ferramentas desatualizadas. Eu reinicio quase do zero. Eu tenho tentado principalmente com JQuery e muitos copy / passado de resultados do Google, a minha mais recente tentativa
chriscatfr

Respostas:

185

Espaço reservado HTML5 jQuery Plugin
- por Mathias Bynens (um colaborador no HTML5 Boilerplate e jsPerf )

https://github.com/mathiasbynens/jquery-placeholder

Demonstração e exemplos

http://mathiasbynens.be/demo/placeholder

ps
Eu usei este plugin muitas vezes e funciona um prazer. Além disso, ele não envia o texto do espaço reservado como um valor quando você envia seu formulário (... uma dor real que encontrei com outros plugins).

Chris Jacob
fonte
Estamos trabalhando com um CRM personalizado. Adicionei esse código e os trabalhos conforme o esperado, mas eles enviam seus formulários via javascript. O botão enviar tem onclick="_IW.FormsRuntime.submit(this.form);". Existe alguma maneira de alterar esse evento onclick para limpar primeiro os espaços reservados e, em seguida, executar esse código CRM existente no onclick?
Leeish
1
copiei o arquivo github js no meu código src. Ainda não vai com o espaço reservado.
Philo
2
Isso realmente funciona, mas é difícil usar em aplicativos de página única. Você precisa acioná-lo manualmente para campos adicionados dinamicamente. Fora isso, funciona muito bem!
smets.kevin
1
Obrigado, plugin puro, no entanto, um problema que tenho é com ie9 o espaço reservado desaparece quando a entrada de texto está em foco. Isto é diferente do comportamento HTML5
gerrytan
1
Ele funciona bem com um grande 'but', $ ('input'). Val () retorna o valor do espaço reservado quando a entrada está vazia. Porque eu estou trabalhando com o quadro AJAX, que espaços reservados são enviados ao servidor ...
Danubian Sailor
21

Eu acho que é isso que você está procurando: jquery-html5-placeholder-fix

Esta solução usa a detecção de recursos (via modernizr ) para determinar se o espaço reservado é suportado. Caso contrário, adiciona suporte (via jQuery).

mate
fonte
2
Funciona, mas não é o melhor código. No topo $(this)deve ser atribuído a uma variável que pode ser usada em todo o código. A chamada $para todas as expressões que usa $(this)é um não-não direto de "Não escreva jQuery como este 101".
Sami Samhuri 29/11
20
Você precisa ter cuidado com esse código, pois se você enviar o formulário, o valor do espaço reservado será enviado como um valor de formulário. Deve limpá-lo antes de ser enviado.
Ericbae
2
@chriscatfr Por favor, considere aceitar minha resposta ( stackoverflow.com/a/13281620/114140 ), pois acho que direcionará os usuários de SO a uma solução muito melhor.
Chris Jacob
Curioso, já que sou novo na batalha de recursos do HTML 5: é o modernizador que faz com que essa seja uma solução ruim ou a própria correção jquery-html5-placeholder (ou ambas)?
Snekse
Isso é simples e elegante e fez o trabalho por mim.
Graumanoz
17

Se você quiser fazer isso sem usar o jquery ou o modenizador, use o código abaixo:

(function(){

     "use strict";

     //shim for String's trim function..
     function trim(string){
         return string.trim ? string.trim() : string.replace(/^\s+|\s+$/g, "");
     }

     //returns whether the given element has the given class name..
     function hasClassName(element, className){ 
         //refactoring of Prototype's function..
         var elClassName = element.className;
         if(!elClassName)
             return false;
         var regex = new RegExp("(^|\\s)" + className + "(\\s|$)");
         return regex.test(element.className);
     }

     function removeClassName(element, className){
         //refactoring of Prototype's function..
         var elClassName = element.className;
         if(!elClassName)
             return;
         element.className = elClassName.replace(
             new RegExp("(^|\\s+)" + className + "(\\s+|$)"), ' ');
     }

     function addClassName(element, className){
         var elClassName = element.className;
         if(elClassName)
             element.className += " " + className;
         else
             element.className = className;
     }

     //strings to make event attachment x-browser.. 
     var addEvent = document.addEventListener ?
            'addEventListener' : 'attachEvent';
     var eventPrefix = document.addEventListener ? '' : 'on';

     //the class which is added when the placeholder is being used..
     var placeHolderClassName = 'usingPlaceHolder';

     //allows the given textField to use it's placeholder attribute
     //as if it's functionality is supported natively..
     window.placeHolder = function(textField){

         //don't do anything if you get it for free..
         if('placeholder' in document.createElement('input'))
             return;

         //don't do anything if the place holder attribute is not
         //defined or is blank..
         var placeHolder = textField.getAttribute('placeholder');        
         if(!placeHolder)
             return;

         //if it's just the empty string do nothing..
         placeHolder = trim(placeHolder);
         if(placeHolder === '')
             return;

         //called on blur - sets the value to the place holder if it's empty..
         var onBlur = function(){
             if(textField.value !== '') //a space is a valid input..
                 return;
             textField.value = placeHolder;
             addClassName(textField, placeHolderClassName);
         };

         //the blur event..
         textField[addEvent](eventPrefix + 'blur', onBlur, false);

         //the focus event - removes the place holder if required..
         textField[addEvent](eventPrefix + 'focus', function(){
             if(hasClassName(textField, placeHolderClassName)){
                removeClassName(textField, placeHolderClassName);
                textField.value = "";
             }
         }, false);

         //the submit event on the form to which it's associated - if the
         //placeholder is attached set the value to be empty..
         var form = textField.form;
         if(form){
             form[addEvent](eventPrefix + 'submit', function(){
                 if(hasClassName(textField, placeHolderClassName))
                     textField.value = '';
            }, false);
         }

         onBlur(); //call the onBlur to set it initially..
    };

}());

Para cada campo de texto que você deseja usá-lo, é necessário executar placeHolder(HTMLInputElement), mas acho que você pode simplesmente mudar isso para se adequar! Além disso, fazer dessa maneira, em vez de apenas carregar, significa que você pode fazê-lo funcionar para entradas que não estão no DOM quando a página é carregada.

Observe que isso funciona aplicando a classe: usingPlaceHolderao elemento de entrada, para que você possa usá-lo para estilizá-lo (por exemplo, adicione a regra .usingPlaceHolder { color: #999; font-style: italic; }para torná-la melhor).

Mark Rhodes
fonte
1
Desculpe - eu realmente não sei se isso é fácil - acho que você deseja exibir o valor real do texto, em vez dos "símbolos". O único truque em que posso pensar em fazer isso seria trocá-lo por uma entrada de texto, a menos que tenha foco ou valor, caso contrário, exibi-lo como um campo de senha.
Mark Rhodes
@StephenPatten Veja minha correção para espaços reservados com campos de senha. Eu faço exatamente o que Mark sugeriu :)
Chev
8

Aqui está uma solução muito melhor. http://bavotasan.com/2011/html5-placeholder-jquery-fix/ Adotei um pouco para trabalhar apenas com navegadores no IE10

<!DOCTYPE html>
<!--[if lt IE 7]><html class="no-js lt-ie10 lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]><html class="no-js lt-ie10 lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]><html class="no-js lt-ie10 lt-ie9" lang="en"> <![endif]-->
<!--[if IE 9]><html class="no-js lt-ie10" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--><html class="no-js" lang="en"><!--<![endif]-->

    <script>
    // Placeholder fix for IE
      $('.lt-ie10 [placeholder]').focus(function() {
        var i = $(this);
        if(i.val() == i.attr('placeholder')) {
          i.val('').removeClass('placeholder');
          if(i.hasClass('password')) {
            i.removeClass('password');
            this.type='password';
          }     
        }
      }).blur(function() {
        var i = $(this);  
        if(i.val() == '' || i.val() == i.attr('placeholder')) {
          if(this.type=='password') {
            i.addClass('password');
            this.type='text';
          }
          i.addClass('placeholder').val(i.attr('placeholder'));
        }
      }).blur().parents('form').submit(function() {
        //if($(this).validationEngine('validate')) { // If using validationEngine
          $(this).find('[placeholder]').each(function() {
            var i = $(this);
            if(i.val() == i.attr('placeholder'))
              i.val('');
              i.removeClass('placeholder');

          })
        //}
      });
    </script>
    ...
    </html>
Stanislav Pisockij
fonte
não funciona no IE8 desde IE não permite jQuery para manipular tipos de entrada (check-out comentário de Bill em 20 de Dezembro de 2011 às 13:48 na bavotasan.com/2011/html5-placeholder-jquery-fix )
Forste
também assume que você está enviando um formulário. A maioria dos aplicativos de página única que eu já vi não usa formulários. basta clicar em manipuladores.
Chovy
5

Se você deseja inserir uma descrição, pode usá-lo. Isso funciona no IE 9 e em todos os outros navegadores.

<input type="text" onclick="if(this.value=='CVC2: '){this.value='';}" onblur="if(this.value==''){this.value='CVC2: ';}" value="CVC2: "/>
Erdem KAYA
fonte
1
Não testei sozinho, mas acho que isso não funcionará bem se você tabular o campo em vez de clicar nele. Eu vejo esse bug em muitos sites ou em sites semelhantes.
eselk
Com esta solução, você também precisa verificar esse valor no envio do formulário.
Igor Jerosimić
Estou surpreso este tem alguma votos, isso não deve ser utilizado mesmo quando postou em 2012/2013
LocalPCGuy
Se você escrever na entrada, qual deve ser o espaço reservado ('CV2:') o que você digitou será excluído.
Daniel
2

Usando mordernizr para detectar navegadores que não oferecem suporte ao Placeholder, criei esse código curto para corrigi-los.

//If placeholder is not supported
if (!Modernizr.input.placeholder){ 

    //Loops on inputs and place the placeholder attribute
    //in the textbox.
    $("input[type=text]").each( function() { 
       $(this).val($(this).attr('placeholder')); 
    })
}
Etienne Dupuis
fonte
2
Você precisa ter cuidado com esse código, pois se você enviar o formulário, o valor do espaço reservado será enviado como um valor de formulário. Você deve limpá-lo antes de ser enviado.
Chriscatfr 23/10/2015
3
@chriscatfr: Como alguém faria isso corretamente neste exemplo? Se meu espaço reservado for 'Senha' e minha senha for realmente 'Senha'?
Lain
Você pode usar o conceito de "sujo" para campos como este. Sinalize o campo como limpo na entrada (talvez use data-dirty = "false"). Se eles enviarem o formulário sem alterar o texto do espaço reservado, você verá que o campo está limpo, então limpe-o. Se eles o alteraram, mesmo com o mesmo valor que o espaço reservado, está sujo e você envia esse valor.
oooyaya
para a senha e outra solução por favor, olhar para o jsfiddle.net/AlexanderPatel/1pv2174c/3
Shirish Patel
placeholdera propriedade foi padronizada como string => não há necessidade de Modernizr na verdade :::::::::::::::::::::::::::::: if( typeof $('<input type="text">').get(0).placeholder == "undefined" ){ ... }é um teste completo para não-suporte, testado na emulação de modo IE9 - funciona.
Jave.web 1/11/16
2

Sei que estou atrasado, mas encontrei uma solução inserindo na cabeça a tag:

<meta http-equiv="X-UA-Compatible" content="IE=edge"/> <!--FIX jQuery INTERNET EXPLORER-->

decadenza
fonte
Você testou isso no IE9? Porque de outra forma IE10 + suportes espaço reservado ...
jave.web
É claro, é estranho que o IE9 não suporte a si próprio que uma tag a ativaria - era um recurso experimental por trás disso? Isso é referenciado em algum lugar? :)
jave.web
1

para fazê-lo funcionar no IE-9, use abaixo. funciona para mim

O JQuery precisa incluir:

jQuery(function() {
   jQuery.support.placeholder = false;
   webkit_type = document.createElement('input');
   if('placeholder' in webkit_type) jQuery.support.placeholder = true;});
   $(function() {

     if(!$.support.placeholder) {

       var active = document.activeElement;

       $(':text, textarea, :password').focus(function () {

       if (($(this).attr('placeholder')) && ($(this).attr('placeholder').length > 0) &&         ($(this).attr('placeholder') != '') && $(this).val() == $(this).attr('placeholder')) {
          $(this).val('').removeClass('hasPlaceholder');
        }
      }).blur(function () {
if (($(this).attr('placeholder')) && ($(this).attr('placeholder').length > 0) &&  ($(this).attr('placeholder') != '') && ($(this).val() == '' || $(this).val() ==   $(this).attr('placeholder'))) {
     $(this).val($(this).attr('placeholder')).addClass('hasPlaceholder');
}
});

$(':text, textarea, :password').blur();
$(active).focus();
$('form').submit(function () {
     $(this).find('.hasPlaceholder').each(function() { $(this).val(''); });
});
}
});

O estilo CSS precisa incluir:

.hasPlaceholder {color: #aaa;}
Suresh Gupta
fonte
1
você deve corrigir sua formatação aqui, como add recuo e separar a sua resposta do seu código
um darren
1

Um pouco atrasado para a festa, mas eu uso o meu JS experimentado e confiável que tira proveito do Modernizr . Pode ser copiado / colado e aplicado a qualquer projeto. Funciona sempre:

// Placeholder fallback
if(!Modernizr.input.placeholder){

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

}
egr103
fonte
Todas essas soluções usando jQuery .. não há solução sem o jQuery inchado?
Spock
0

Eu geralmente penso muito bem em http://cdnjs.com/ e eles estão listando:

//cdnjs.cloudflare.com/ajax/libs/placeholder-shiv/0.2/placeholder-shiv.js

Não tenho certeza de quem é o código, mas parece direto:

document.observe('dom:loaded', function(){
  var _test = document.createElement('input');
  if( ! ('placeholder' in _test) ){
    //we are in the presence of a less-capable browser
    $$('*[placeholder]').each(function(elm){
      if($F(elm) == ''){
        var originalColor = elm.getStyle('color');
        var hint = elm.readAttribute('placeholder');
        elm.setStyle('color:gray').setValue(hint);
        elm.observe('focus',function(evt){
          if($F(this) == hint){
            this.clear().setStyle({color: originalColor});
          }
        });
        elm.observe('blur', function(evt){
          if($F(this) == ''){
            this.setValue(hint).setStyle('color:gray');
          }
        });
      }
    }).first().up('form').observe('submit', function(evt){
      evt.stop();
      this.select('*[placeholder]').each(function(elm){
        if($F(elm) == elm.readAttribute('placeholder')) elm.clear();
      });
      this.submit();
    });
  }
});
cwd
fonte
1
Este plugin requer a biblioteca protótipo também
rosswil
0

Eu procurei na internet e encontrei um código jquery simples para lidar com esse problema. Do meu lado, foi resolvido e trabalhado no ie 9.

$("input[placeholder]").each(function () {
        var $this = $(this);
        if($this.val() == ""){
            $this.val($this.attr("placeholder")).focus(function(){
                if($this.val() == $this.attr("placeholder")) {
                    $this.val("");
                }
            }).blur(function(){
                if($this.val() == "") {
                    $this.val($this.attr("placeholder"));
                }
            });
        }
    });
Günay Gültekin
fonte
2
seu espaço reservado se torna o valor. Se você enviar, eles serão enviados. Com o placeholder.js da resposta correta, os campos são mantidos em branco
chriscatfr