Obsługa HTML5 "placeholder"

Question

Jak mogę się dowiedzieć, czy przeglądarka obsługuje znacznik zastępczy HTML5, więc mogę zdecydować, czy podpiąć moją wtyczkę jQuery, czy nie.

Answer 1

var placeholderSupported = ('placeholder' in document.createElement('input')); 

zmiennej placeholderSupported będzie true jeśli jest on natywnie obsługiwane. W przeciwnym razie zostanie ustawiony na false.

Answer 2

Aby uzyskać szeroki pomysł iść do:

http://caniuse.com/#search=placeholder

I przetestować w przeglądarce można zrobić:

function supportsPlaceholder() { 
    var i = document.createElement('input'); 
    return 'placeholder' in i; 
} 

Answer 3

Jeśli chcesz dołączyć bibliotek innych firm, takich jak modernizr i yepnope .js, naprawdę łatwo jest przetestować wsparcie i stopniowo ulepszać, z wdziękiem degradować.

To jest dobry artykuł z dużą ilością zasobów, które powinny pomóc: http://www.sitepoint.com/regressive-enhancement-with-modernizr-and-yepnope/

Answer 4

http://diveinto.html5doctor.com/everything.html#placeholder

return 'placeholder' in document.createElement('input'); 

jednak plugin jQuery używasz może już być sprawdzanie natywnego wsparcia - to polubisz nie trzeba to zrobić samodzielnie.

Answer 5

pożyczyłem z odpowiedzi powyżej zrobiłem to tak, że jest kompatybilny wstecznie ze starszymi nowoczesnych przeglądarkach, a także IE -

z poniższym kodzie, upewnij się, że zarówno „wartość” i „zastępczy "zestaw atrybutów dla pól wejściowych. W moim konkretnym przypadku musiałem wspierać warianty IE.

Wyjaśnienie - Jeśli przeglądarka obsługuje symbol zastępczy, wartość wejściowa zostanie usunięta. Jeśli nie, starsze przeglądarki zignorują atrybuty zastępcze, a poniższy js naśladuje domyślne zachowanie zastępcze. Ten skrypt będzie także ignorował wszystkie tokeny uwierzytelnienia dla CSRF (otrzymywał błąd, w którym wartości tokenów auth zostały usunięte w moich formularzach powodując ostrzeżenie CSRF w moich aplikacjach Railsowych).

Innym sposobem na uproszczenie samego skryptu jest przypisanie klasy do każdego wejścia, którego chcesz użyć i zaktualizowanie prawdziwej instrukcji (chociaż poniższa metoda jest nieco bardziej sucha).

var placeholderSupported = !!('placeholder' in document.createElement('input')); 

if (placeholderSupported === true){ 
    $('input:not([type="submit"], [name="authenticity_token"])').val(''); 
} else{ 
    $('input') 
     .focus(function() { 
      if (this.value === this.defaultValue) { 
       this.value = ''; 
      } 
     }) 
     .blur(function() { 
      if (this.value === '') { 
       this.value = this.defaultValue; 
      } 
    }); 
}