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

Question

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

Answer 1

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

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

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://stackoverflow.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, вы можете использовать Простой заполнитель , который возник здесь в StackOverflow .