Комментарий: в HTML5 было представлено много интересных новых функций; Некоторые из них отражены в HTML, некоторые являются API JavaScript, которые очень полезны. Одной из моих любимых функций является свойство заполнителя в текстовом поле (вход).
Свойство заполнителя позволяет отображать информацию о приглашении в текстовом поле. Как только вы введете любую информацию в текстовое поле, информация о приглашении будет скрыта. Возможно, вы видели этот эффект бесчисленное количество раз, но большинство из них реализованы в JavaScript, и теперь HTML5 обеспечивает собственную поддержку, и он работает лучше!
HTML -код
Вы также видели, что все, что вам нужно сделать, это добавить атрибут «Заполнителя» к этикетке декларации текстового поля. JavaScript вообще не нужна для создания этого эффекта.
Проверьте, поддерживает ли браузер атрибут заполнителя
Поскольку Placeholder является новой собственностью, очень необходимо проверить, поддерживает ли ваш браузер его. Например, IE6 и IE8 определенно не поддерживаются:
Функция Has PlaceholdersUpport () {
var input = document.createElement ('input');
return ('Placeholder' при входе);
}
Если браузер пользователя не поддерживает функцию заполнителя, вам необходимо использовать Mootools, Dojo или другие инструменты Javascript для ее реализации:
/* Mootools FTW! */
var FirstNamebox = $ ('First_Name'),
message = FirstNamebox.get ('Placeholder');
firstnamebox.addevents ({
Focus: function () {
if (firstnamebox.value == message) {searchbox.value = ''; }
},
Blur: function () {
if (firstnamebox.value == '') {searchbox.value = сообщение; }
}
});
Украсить заполнителя с CSS
Во время дальнейших исследований я обнаружил еще одну интересную функцию CSS: CSS, украшающий эффект входного заполнителя. Позвольте мне использовать простой CSS -код, чтобы украсить текст заполнителя в текстовом поле.
CSS -код
Использование в браузере Firefox отличается от использования в Google Chrome. Их имена легко понять:
/* все */
::-webkit-input-placeholder {color:#f00; }
::-Moz-Placeholder {Color:#F00; } / * Firefox 19+ * /
: -ms-input-placeholder {color:#f00; } / * т.е. * /
Ввод: -moz-placeholder {color:#f00; }
/ * индивидуальное: webkit */
#field2 ::-webkit-input-placeholder {color:#00f; }
#field3 ::-webkit-input-placeholder {color:#090; Фон: Lightgreen; Текст-трансформация: верхний регистр; }
#field4 ::-webkit-input-placeholder {font-style: italic; Текстовое декорация: оборотень; СКАЖИ САМЕТ: 3PX; Цвет:#999; }
/ * индивидуально: mozilla */
#Field2 ::-Moz-Placeholder {color:#00f; }
#Field3 ::-Moz-Placeholder {Color:#090; Фон: Lightgreen; Текст-трансформация: верхний регистр; }
#Field4 ::-Moz-Placeholder {font-style: italic; Текстовое декорация: оборотень; СКАЖИ САМЕТ: 3PX; Цвет:#999; }
Вы можете контролировать шрифт, цвет и стиль текста заполнителей. Вы даже можете отобразить заполнитель текстового поля анимированным образом. Украсить ваши текстовые поля - это то, что выглядит маленьким, но для некоторых интерактивных сайтов ключ к успеху заключается в деталях. Теперь IE10 поддерживает только заполнителя. Я считаю, что все больше и больше людей будут использовать этот эффект нативного заполнителя.