jak używać atrybutu zastępczego HTML5 z myślą o zgodności wstecznej?

Question

Chciałbym użyć atrybutu zastępczego HTML5 (można go znaleźć w kodzie w biuletynie pod numerem Thought Results). Ale kiedy używam starszych przeglądarek, oczywiście nic nie renderują. Do naśladowania mogę użyć JavaScript, ale potem nie powinienem go używać i robi się to w starym stylu. Jak mogę mieć zarówno atrybut zastępczy HTML5, a jednocześnie symulować go dla starszych przeglądarek?

Answer 1

Można wykryć czy przeglądarka obsługuje atrybut:

http://diveintohtml5.info/detect.html#input-placeholder

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

Jeśli tak, nic nie robić. Jeśli nie, możesz użyć JS, aby pobrać wartość zastępczą, a następnie wstawić ją do pola zgodnie z oczekiwaniami (prawdopodobnie jako wartość domyślną), a następnie dodać odpowiednie interakcje, aby symulować zachowanie symboli zastępczych HTML5.

Answer 2

@marcgg napisał świetną wtyczkę zastępczą JQuery, która zasadniczo powiela funkcje zastępczą dla tych przeglądarek, które jej nie obsługują.

https://github.com/marcgg/Simple-Placeholder

Szukałem przez wiele wtyczek zastępczych przed osiedleniem się na ten jeden i działa świetnie do tej pory. Pierwotnie znalazł w odpowiedzi na niniejsze podobnym pytaniem:

https://stackoverflow.com/questions/5120257/what-is-the-best-html5-placeholder-like-jquery-plugin-out-there

Answer 3

Polecam używanie Modernizr wykryć tę funkcję.

if (Modernizr.input.placeholder) { 
    // your placeholder text should already be visible! 
} else { 
    // no placeholder support :(
    // fall back to a scripted solution 
} 

Jeśli nie chcesz korzystać z tej biblioteki, możesz użyć następującego kodu.

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

odniesieniu do awaryjne wsparcie, jeśli używasz jQuery można użyć Simple Placeholder, który miał swój początek tutaj w StackOverflow.