Комментарий: Браузер представил множество функций HTML5. Одним из моих любимых является представление атрибута заполнителя для входного элемента. Атрибут «Заполнителя» отображает направляющий текст до тех пор, пока в окне ввода не будет получено входное направление. Когда пользователь вводит контент, содержимое руководства будет автоматически скрыто.
Оригинальный адрес: атрибут заполнителя HTML5Демо -адрес: заполнитель
Первоначальная дата: 9 августа 2010 г.
Дата перевода: 6 августа 2013 г.
Браузер представляет множество функций HTML5: некоторые основаны на HTML, некоторые находятся в виде API JavaScript, но все они очень полезны. Одним из моих любимых является введение атрибута заполнителя для входного элемента.
Свойство заполнителя отображает направляющий текст до тех пор, пока поле ввода не получает входной фокус. Когда пользователь вводит контент, содержимое руководства будет автоматически скрыто. Вы определенно видели, как этот метод реализован в JavaScript тысячи раз, но нативная поддержка HTML5, как правило, лучше.
HTML -код выглядит следующим образом:
<input type = "text" Placeholder = "Пожалуйста, введите постоянный адрес ...">
Все, что вам нужно сделать, это добавить домен заполнителя и некоторое управляемое текстовое содержимое, и для достижения этого эффекта не нужны дополнительные сценарии JavaScript. Разве это не здорово?
Проверка поддержки заполнителей
(Обратите внимание, что это статья 2010 года. До сих пор, в 2013 году, основные браузеры должны были поддерживать ее.)
Поскольку Placeholder является новой функцией, необходимо проверить поддержку браузеров. Код JS выглядит следующим образом:
// Создать элемент ввода в JS и определить, имеет ли элемент атрибут, называемый Placeholder
// Если браузер поддержит его, это свойство будет существовать в DOM, ссылаясь на JS
Функция Has PlaceholdersUpport () {
var input = document.createElement ('input');
return ('Placeholder' при входе);
}
Если браузер не поддерживает функцию заполнителя, вам нужна стратегия отступления, например, Mootools, Dojo или другие инструменты JavaScript. (Теперь додзё может использоваться меньше, а в Китае - jquery и extjs.)
/* Код jQuery, конечно, не забудьте представить библиотеку jQuery*/
$ (function () {
if (! Имеет местоположение holdersupport ()) {
// Получить элемент адреса
var $ address = $ ("input [name = 'address']");
Placeholder = $ address.attr ("Placeholder");
// Связь с фокусировкой
$ address.bind ('Focus', function () {
if (Placeholder == $ address.val ()) {
$ address.val ('');
}
});
// Событие Lost Focus
$ address.bind ('blur', function () {
if ('' == $ address.val ()) {
$ address.val (заполнитель);
}
});
}
});
Заполнитель - еще одна отличная собственность для браузера, чтобы заменить фрагменты JS, вы можете даже редактировать стиль заполнителя HTML5.
Все коды следующие:
<! Doctype html>
<html>
<голова>
<title> демонстрация атрибута HTML5 Placeholder </title>
<Meta Content = "EditPlus">
<Meta Content = "[email protected]">
<Meta Content = "Original = http: //davidwalsh.name/html5-placeholder">
<script src = "http://code.jquery.com/jquery-1.7.1.min.js"> </script>
<Скрипт>
// Создать элемент ввода в JS и определить, имеет ли элемент атрибут, называемый Placeholder
// Если браузер поддержит его, это свойство будет существовать в DOM, ссылаясь на JS
Функция Has PlaceholdersUpport () {
var input = document.createElement ('input');
return ('Placeholder' при входе);
}
/* Код jQuery, конечно, не забудьте представить библиотеку jQuery*/
$ (function () {
if (! Имеет местоположение holdersupport ()) {
// Получить элемент адреса
var $ address = $ ("input [name = 'address']");
Placeholder = $ address.attr ("Placeholder");
// Связь с фокусировкой
$ address.bind ('Focus', function () {
if (Placeholder == $ address.val ()) {
$ address.val ('');
}
});
// Событие Lost Focus
$ address.bind ('blur', function () {
if ('' == $ address.val ()) {
$ address.val (заполнитель);
}
});
}
});
</script>
</head>
<тело>
<div>
<form method = "post" action = "">
<input type = "text" Placeholder = "Пожалуйста, введите постоянный адрес ...">
<input type = "отправить" value = "test">
</form>
</div>
</body>
</html>