Segnaposto in IE9


140

Sembra che sia un problema molto noto ma tutte le soluzioni che ho trovato su Google non funzionano sul mio IE9 appena scaricato.

Qual è il tuo modo preferito per abilitare la Placeholderproprietà sui tag inpute textarea?

Opzionale: ho perso molto tempo e non ho ancora cercato la requiredproprietà. Avresti anche qualche consiglio per questo? Ovviamente posso controllare il valore in PHP, ma per aiutare l'utente questa proprietà è molto conveniente.


Sono tornato in HTML dopo 4 anni. Significa che sono aperto a qualsiasi consiglio di sostituire i miei strumenti obsoleti. Ricomincio quasi da zero. Ho provato principalmente con JQuery e molti copia / passato dai risultati di Google, il mio
ultimo

Risposte:


185

Plugin segnaposto HTML5 jQuery
- di Mathias Bynens (un collaboratore di HTML5 Boilerplate e jsPerf )

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

Demo ed esempi

http://mathiasbynens.be/demo/placeholder

ps
Ho usato questo plugin molte volte e funziona a meraviglia. Inoltre non invia il testo segnaposto come valore quando invii il modulo (... un vero dolore che ho riscontrato con altri plug-in).


Stiamo lavorando con un CRM personalizzato. Ho aggiunto questo codice e funziona come previsto, ma inviano i loro moduli tramite javascript. Il pulsante di invio ha onclick="_IW.FormsRuntime.submit(this.form);". Posso comunque modificare questo evento onclick per cancellare prima i segnaposto e quindi eseguire questo codice CRM che esiste nel onclick?
Leeish

1
ho copiato il file jith github nel mio codice src. Ancora niente da fare con il segnaposto.
Filone,

2
Questo in effetti funziona a meraviglia, tuttavia è un dolore da usare su applicazioni a pagina singola. È necessario attivarlo manualmente per i campi aggiunti dinamicamente. A parte questo, funziona benissimo!
smets.kevin,

1
Grazie, plugin pulito, tuttavia un problema che ho è con ie9 il segnaposto scompare quando l'immissione del testo è a fuoco. Questo è diverso dal comportamento HTML5
gerrytan

1
Funziona bene con un grande 'ma', $ ('input'). Val () restituisce il valore di segnaposto quando l'input è vuoto. Poiché sto lavorando con il framework AJAX, i segnaposto vengono inviati al server ...
Danubian Sailor,

21

Penso che questo sia quello che stai cercando: jquery-html5-placeholder-fix

Questa soluzione utilizza il rilevamento delle funzionalità (tramite modernizr ) per determinare se il segnaposto è supportato. In caso contrario, aggiunge il supporto (tramite jQuery).


2
Funziona, ma non è il miglior codice. Nella parte superiore $(this)dovrebbe essere assegnato a una variabile che può essere utilizzata in tutto il codice. Richiedere $ogni espressione che usa $(this)è un no-no uscito da "Don't Write jQuery Like This 101".
Sami Samhuri,

20
Devi fare attenzione con questo codice poiché se invii il modulo, il valore del segnaposto verrà inviato come valore del modulo. Dovrebbe cancellarlo prima che venga inviato.
ericbae,

2
@chriscatfr Considerare di accettare la mia risposta ( stackoverflow.com/a/13281620/114140 ) poiché ritengo che indirizzerà gli utenti SO verso una soluzione molto migliore.
Chris Jacob,

Curioso da quando sono nuovo alla battaglia delle funzionalità di HTML 5: è il modernizzatore che fa sì che questa sia una cattiva soluzione o la jquery-html5-placeholder-fix stessa (o entrambe)?
Snekse,

Questo è semplice ed elegante e ha fatto il lavoro per me.
Graumanoz,

17

Se vuoi farlo senza usare jquery o modenizer puoi usare il codice qui sotto:

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

}());

Per ogni campo di testo che si desidera utilizzare per l'esecuzione è necessario placeHolder(HTMLInputElement) , che sia possibile modificarlo per adattarlo! Inoltre, farlo in questo modo, anziché solo sotto carico, significa che puoi farlo funzionare per input che non sono nel DOM quando la pagina viene caricata.

Nota che funziona applicando la classe: usingPlaceHolder all'elemento input, quindi puoi usarlo per modellarlo (es. Aggiungi la regola .usingPlaceHolder { color: #999; font-style: italic; }per renderlo migliore).


1
Mi dispiace - non so davvero se sia facile da fare - immagino che tu voglia visualizzare il valore del testo effettivo, piuttosto che i "simboli". L'unico trucco che mi viene in mente di fare questo sarebbe quello di cambiarlo per un input di testo a meno che non abbia lo stato attivo o un valore, altrimenti visualizzarlo come un campo password.
Mark Rhodes,

@StephenPatten Dai un'occhiata alla mia correzione per segnaposto con campi password. Faccio esattamente ciò che Mark ha suggerito :)
Chev,

8

Ecco una soluzione molto migliore. http://bavotasan.com/2011/html5-placeholder-jquery-fix/ L' ho adottato un po 'per funzionare solo con browser 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>

non funziona su IE8 poiché IE non consente a jQuery di manipolare i tipi di input (leggi il commento di Bill del 20 dicembre 2011 alle 13:48 su bavotasan.com/2011/html5-placeholder-jquery-fix )
forste

presuppone inoltre che si stia inviando un modulo. La maggior parte delle app a pagina singola che ho visto non usano i moduli. basta fare clic su gestori.
Chovy

5

Se vuoi inserire una descrizione puoi usarla. Funziona su IE 9 e tutti gli altri browser.

<input type="text" onclick="if(this.value=='CVC2: '){this.value='';}" onblur="if(this.value==''){this.value='CVC2: ';}" value="CVC2: "/>

1
Non l'ho testato da solo, ma indovinare che non funziona bene se fai clic sul campo invece di fare clic su di esso. Vedo questo bug in molti siti Web o in quelli simili.
eselk,

Con questa soluzione è inoltre necessario verificare questo valore al momento dell'invio del modulo.
Igor Jerosimić,

Sono sorpreso che abbia ottenuto alcun voto, questo non dovrebbe essere utilizzato anche se pubblicato nel 2012/2013
LocalPCGuy

Se ti capita di scrivere nell'input quale dovrebbe essere il segnaposto ('CV2:') ciò che hai digitato verrà eliminato.
Daniel,

2

Utilizzando mordernizr per rilevare i browser che non supportano il segnaposto, ho creato questo codice funzione per risolverli.

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

2
Devi fare attenzione con questo codice poiché se invii il modulo, il valore del segnaposto verrà inviato come valore del modulo. Dovresti cancellarlo prima che venga inviato.
Chriscatfr,

3
@chriscatfr: come si farebbe correttamente in questo esempio? Se il mio segnaposto è "Password" e la mia password è in realtà "Password"?
Lain,

Potresti usare il concetto di "sporco" per campi come questo. Contrassegna il campo come pulito al momento dell'inserimento (forse usa data-dirty = "false"). Se inviano il modulo senza modificare il testo segnaposto, vedrai che il campo è pulito, quindi deselezionalo. Se l'hanno cambiato, anche con lo stesso valore del segnaposto, allora è sporco e tu invii quel valore.
oooyaya,

per la password e altre soluzioni, consultare jsfiddle.net/AlexanderPatel/1pv2174c/3
Shirish Patel,

placeholderproprietà è stata standardizzata come stringa => nessuna necessità di Modernizr in realtà ::::::::::::::::::::::::::::: if( typeof $('<input type="text">').get(0).placeholder == "undefined" ){ ... }è un test sufficiente per non supportare, testato in modalità IE9 emulazione - funziona.
jave.web,

2

So di essere in ritardo ma ho trovato una soluzione inserendo in testa il tag:

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


Hai provato questo in IE9? Perché altrimenti IE10 + supporta il segnaposto ...
jave.web

Certo, è semplicemente strano che IE9 non lo supporti da solo che un tag lo accenderebbe - era una funzionalità sperimentale allora? Questo è referenziato da qualche parte? :)
jave.web

1

per farlo funzionare in IE-9 usare sotto .it funziona per me

JQuery deve includere:

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

Lo stile CSS deve includere:

.hasPlaceholder {color: #aaa;}

1
dovresti correggere la formattazione qui, come aggiungere rientro e separare la tua risposta dal tuo codice
un darren

1

Un po 'in ritardo alla festa, ma uso il mio JS provato e affidabile che sfrutta Modernizr . Può essere copiato / incollato e applicato a qualsiasi progetto. Funziona ogni volta:

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

}

Tutte queste soluzioni che usano jQuery..non esiste soluzione senza il jQuery gonfio?
Spock,

0

Di solito penso abbastanza bene a http://cdnjs.com/ e stanno elencando:

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

Non sono sicuro di chi sia il codice, ma sembra semplice:

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

1
Questo plugin richiede anche la libreria prototipi
rosswil

0

Ho cercato su Internet e ho trovato un semplice codice jquery per gestire questo problema. Dal mio lato, è stato risolto e ha funzionato su 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"));
                }
            });
        }
    });

2
il tuo segnaposto diventa il valore. Se invii verranno inviati. Con il placeholder.js della risposta corretta, i campi vengono mantenuti vuoti
chriscatfr
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.