Symbol zastępczy w IE9

140

Wygląda na to, że jest to bardzo dobrze znany problem, ale wszystkie rozwiązania, które znalazłem w Google, nie działają na moim nowo pobranym IE9.

Jaki jest Twój ulubiony sposób włączania Placeholderwłaściwości w tagach inputi textarea?

Opcjonalnie: straciłem na tym dużo czasu i jeszcze nie szukałem requirednieruchomości. Czy miałbyś również jakąś radę w tej sprawie? Oczywiście mogę sprawdzić wartość w PHP, ale pomoc użytkownikowi ta właściwość jest bardzo wygodna.

chriscatfr
źródło
Wróciłem do HTML po 4 latach. Oznacza to, że jestem otwarty na wszelkie porady dotyczące wymiany przestarzałych narzędzi. Restartuję prawie od zera. Próbowałem głównie z JQuery i wieloma kopiami / przeszłościami z wyników Google, moja
ostatnia

Odpowiedzi:

185

Wtyczka HTML5 Placeholder jQuery
- autorstwa Mathiasa Bynensa (współpracownika przy HTML5 Boilerplate i jsPerf )

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

Demo i przykłady

http://mathiasbynens.be/demo/placeholder

ps
Korzystałem z tej wtyczki wiele razy i działa świetnie. Także to nie przedstawi tekst zastępczy jako wartość po przesłaniu formularza (... prawdziwy ból I z innych wtyczek znaleziono).

Chris Jacob
źródło
Pracujemy z niestandardowym CRM. Dodałem ten kod i prace zgodnie z oczekiwaniami, ale przesyłają swoje formularze za pomocą javascript. Przycisk przesyłania ma onclick="_IW.FormsRuntime.submit(this.form);". Czy mimo wszystko mogę zmienić to zdarzenie onclick, aby najpierw wyczyścić symbole zastępcze, a następnie uruchomić ten kod CRM, który istnieje w onclick?
Leeish
1
Skopiowałem plik js github do mojego kodu src. Nadal nie można używać symbolu zastępczego.
Philo
2
To naprawdę działa, ale jest uciążliwe w przypadku aplikacji jednostronicowych. Musisz wyzwolić ją ręcznie dla dynamicznie dodanych pól. Poza tym działa świetnie!
smets.kevin
1
Dzięki, zgrabna wtyczka, jednak jeden problem, który mam, dotyczy ie9, symbol zastępczy znika, gdy wprowadzanie tekstu jest aktywne. To jest inne niż zachowanie HTML5
gerrytan
1
Działa dobrze z jednym dużym „ale”, $ („input”). Val () zwraca wartość zastępczą, gdy wejście jest puste. Ponieważ pracuję z frameworkiem AJAX, te symbole zastępcze są wysyłane na serwer ...
Danubian Sailor
21

Myślę, że właśnie tego szukasz: jquery-html5-placeholder-fix

To rozwiązanie wykorzystuje wykrywanie funkcji (przez modernizr ) do określenia, czy jest obsługiwany symbol zastępczy. Jeśli nie, dodaje obsługę (przez jQuery).

matowe
źródło
2
Działa, ale to nie jest najlepszy kod. Na górze $(this)należy przypisać zmienną, której można używać w całym kodzie. Wywołanie $dla każdego używanego wyrażenia $(this)jest nie-nie prosto z „Nie pisz jQuery w ten sposób 101”.
Sami Samhuri
20
Musisz uważać na ten kod, ponieważ jeśli prześlesz formularz, wartość zastępcza zostanie przesłana jako wartość formularza. Powinien wyczyścić go, zanim zostanie przesłany.
ericbae
2
@chriscatfr Proszę rozważyć zaakceptowanie mojej odpowiedzi ( stackoverflow.com/a/13281620/114140 ), ponieważ uważam, że skieruje ona użytkowników SO do znacznie lepszego rozwiązania.
Chris Jacob
Ciekawe, ponieważ jestem nowy w walce o funkcje HTML 5: czy to modernizacja powoduje, że jest to złe rozwiązanie, czy też sama poprawka jquery-html5-placeholder-fix (lub obie)?
Snekse
To jest proste i eleganckie i wykonało pracę za mnie.
graumanoz,
17

Jeśli chcesz to zrobić bez użycia jquery lub modenizera, możesz użyć poniższego kodu:

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

}());

Dla każdego pola tekstowego, którego chcesz użyć, musisz uruchomić placeHolder(HTMLInputElement), ale myślę, że możesz to po prostu zmienić, aby dopasować! Również zrobienie tego w ten sposób, a nie tylko podczas ładowania, oznacza, że ​​możesz sprawić, by działało dla danych wejściowych, które nie znajdują się w DOM podczas ładowania strony.

Zauważ, że działa to poprzez zastosowanie klasy: usingPlaceHolder do elementu wejściowego, więc możesz użyć tego .usingPlaceHolder { color: #999; font-style: italic; }do nadania mu stylu (np. Dodaj regułę, aby wyglądała lepiej).

Mark Rhodes
źródło
1
Przepraszam - naprawdę nie wiem, czy to łatwe - myślę, że wolałbyś wyświetlić rzeczywistą wartość tekstową zamiast „symboli”. Jedynym hackem, o którym mogę pomyśleć, byłoby przełączenie go na wejście tekstowe, chyba że ma fokus lub wartość, w przeciwnym razie wyświetla je jako pole hasła.
Mark Rhodes
@StephenPatten Spójrz na moją poprawkę dla symboli zastępczych z polami hasła. Robię dokładnie to, co zasugerował Marek :)
Chev
8

Oto znacznie lepsze rozwiązanie. http://bavotasan.com/2011/html5-placeholder-jquery-fix/ Zaadaptowałem to trochę do pracy tylko z przeglądarkami pod 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
źródło
nie działa na IE8, ponieważ IE nie pozwala jQuery na manipulowanie typami danych wejściowych (zobacz komentarz z Bill z 20 grudnia 2011 o
13:48
zakłada również, że przesyłasz formularz. Większość aplikacji typu Single page, które widziałem, nie używa formularzy. po prostu kliknij programy obsługi.
chovy
5

Jeśli chcesz wprowadzić opis, możesz użyć tego. Działa to w IE 9 i wszystkich innych przeglądarkach.

<input type="text" onclick="if(this.value=='CVC2: '){this.value='';}" onblur="if(this.value==''){this.value='CVC2: ';}" value="CVC2: "/>
Erdem KAYA
źródło
1
Nie przetestowałem tego sam, ale zgaduję, że to nie działa dobrze, jeśli przejdziesz do pola zamiast klikać. Widzę ten błąd w wielu witrynach internetowych lub podobnych.
eselk
W przypadku tego rozwiązania musisz również sprawdzić tę wartość w przesłanym formularzu.
Igor Jerosimić
Jestem zaskoczony tym jakieś głosy, to nie powinien być stosowany nawet wtedy, gdy pisał w 2012/2013
LocalPCGuy
Jeśli zdarzy się, że napiszesz do wejścia, co powinno być symbolem zastępczym („CV2:”) to, co wpisałeś, zostanie usunięte.
Daniel
2

Używając mordernizr do wykrywania przeglądarek, które nie obsługują symboli zastępczych, utworzyłem ten krótki kod, aby je naprawić.

//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
źródło
2
Musisz uważać na ten kod, ponieważ jeśli prześlesz formularz, wartość zastępcza zostanie przesłana jako wartość formularza. Należy go wyczyścić, zanim zostanie przesłany.
chriscatfr
3
@chriscatfr: Jak można to zrobić poprawnie w tym przykładzie? Jeśli mój symbol zastępczy to „Hasło”, a moje hasło to „Hasło”?
Lain
Możesz użyć pojęcia „brudnych” dla takich pól. Po wejściu oznacz pole jako czyste (może użyj data-dirty = "false"). Jeśli prześlą formularz bez zmiany tekstu zastępczego, zobaczysz, że pole jest czyste, więc wyczyść je. Jeśli go zmienili, nawet na tę samą wartość, co symbol zastępczy, to jest brudny i przesyłasz tę wartość.
oooyaya
hasło i inne rozwiązanie znajdziesz na stronie jsfiddle.net/AlexanderPatel/1pv2174c/3
Shirish Patel
placeholderwłaściwość została znormalizowana jako string => nie ma potrzeby Modernizr w rzeczywistości :::::::::::::::::::::::::::: if( typeof $('<input type="text">').get(0).placeholder == "undefined" ){ ... }to enaugh test for non-support, tested w trybie emulacji IE9 - działa.
jave.web
2

Wiem, że się spóźniłem, ale znalazłem rozwiązanie wstawiając w nagłówku tag:

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

dekadenza
źródło
Czy przetestowałeś to w IE9? Ponieważ w przeciwnym razie IE10 + obsługuje symbol zastępczy ...
jave.web
Oczywiście, to po prostu dziwne, że IE9 sam nie obsługuje tego, że tag go włączy - czy to była funkcja eksperymentalna? Czy jest to gdzieś przywoływane? :)
jave.web
1

aby to działało w IE-9 użyj poniżej. to działa dla mnie

JQuery musi zawierać:

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

Styl CSS musi zawierać:

.hasPlaceholder {color: #aaa;}
Suresh Gupta
źródło
1
powinieneś poprawić tutaj swoje formatowanie, na przykład dodać wcięcie i oddzielić odpowiedź od kodu
darren
1

Trochę spóźniony na imprezę, ale używam mojego wypróbowanego i zaufanego JS, który wykorzystuje Modernizr . Można skopiować / wkleić i zastosować do dowolnego projektu. Działa za każdym razem:

// 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
źródło
Wszystkie te rozwiązania wykorzystujące jQuery… czy nie ma rozwiązania bez rozdętego jQuery?
Spock
0

Zwykle bardzo wysoko cenię http://cdnjs.com/ i wymieniają:

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

Nie jestem pewien, kto to jest kod, ale wygląda to prosto:

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
źródło
1
Ta wtyczka wymaga również biblioteki prototypów
rosswil
0

Szukałem w Internecie i znalazłem prosty kod jQuery, aby poradzić sobie z tym problemem. Po mojej stronie został rozwiązany i pracował nad tj. 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
źródło
2
Twój Symbol zastępczy staje się wartością. Jeśli prześlesz, zostaną wysłane. Z placeholder.js poprawnej odpowiedzi, pola pozostają puste
chriscatfr