Как использовать атрибут заполнителя HTML5 с учетом обратной совместимости?

Question

Я хотел бы использовать HTML5-атрибут placeholder (Вы можете увидеть его в катионе в информационном бюллетене на Thought Results). Но когда я использую старые браузеры, они, конечно, ничего не рендерит. Я могу использовать JavaScript, чтобы имитировать его, но тогда я не должен его использовать, и это делается по-старому. Как я могу иметь как атрибут-заполнитель HTML5, так и одновременно имитировать его для старых браузеров?

Answer 1

Вы можете определить, поддерживает ли браузер атрибут:

http://diveintohtml5.info/detect.html

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

Если это так, ничего не делай. Если это не так, вы можете использовать JS, чтобы получить значение заполнителя, а затем вставить его в поле по своему усмотрению (возможно, в качестве значения по умолчанию), а затем добавить соответствующие взаимодействия для имитации поведения заполнителя HTML5.

Answer 2

@marcgg написал отличный плагин-заполнитель JQuery, который в основном копирует функциональность-заполнитель для тех браузеров, которые его не поддерживают.

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

Я искал много плагинов-заполнителей, прежде чем остановиться на этом, и пока он отлично работает. Первоначально нашел это в ответ на этот похожий вопрос:

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

Answer 3

Я рекомендую использовать Modernizr для обнаружения этой функции.

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

Если вы не заинтересованы в использовании этой библиотеки, вы можете использовать следующий код.

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

Что касается резервной поддержки, если вы используете jQuery, вы можете использовать Simple Placeholder, который возник здесь, в Stackru.