HTML5 сделал много усовершенствований в веб -форме, таких как новый тип типа, проверка формы и т. Д. Заполнитель - еще один атрибут, добавленный в HTML5. Когда ввод или Textarea устанавливает этот атрибут, содержимое этого значения будет отображаться в текстовом поле в качестве приглашения серого слова. Когда текстовое поле приобретает фокус, быстрый текст исчезает. В прошлом для достижения этого эффекта JavaScript использовался для его управления:
Поскольку Placeholder является новым атрибутом, только несколько браузеров в настоящее время поддерживают его. Как определить, поддерживает ли его браузер? (Доступ к большему количеству обнаружения функций HTML5/CSS3)
Функция Has PlaceholdersUpport () {
вернуть «заполнитель» в document.createElement ('input');
}
Текст приглашения по умолчанию серый, а текстовый стиль может быть изменен через CSS:
/ * All */::-Webkit-Input-Placeholder {color:#f00; } input: -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; }Совместим с другими браузерами, которые не поддерживают заполнителя:
var Placeholder = {
_support: (function () {
вернуть «заполнитель» в document.createElement ('input');
}) (),
// Стиль быстрого текста должен быть определен в других местах на странице
ClassName: 'ABC',
init: function () {
if (! Placeholder._Support) {
// Textarea не была обработана, добавьте то, что вам нужно сделать
var inputs = document.getElementsbytagname ('input');
Placeholder.create (входные данные);
}
},
create: function (входы) {
var вход;
if (! inputs.length) {
Вход = [входы];
}
для (var i = 0, length = inputs.length; i <length; i ++) {
input = inputs [i];
if (! Placeholder._support && input.attributes && input.attributes.placeholder) {
Placeholder._SetValue (input);
input.addeventlistener ('Focus', function (e) {
if (this.value === this.attributes.placeholder.nodevalue) {
this.value = '';
this.classname = '';
}
}, ЛОЖЬ);
input.addeventlistener ('blur', function (e) {
if (this.value === '') {
Placeholder._SetValue (это);
}
}, ЛОЖЬ);
}
}
},
_SetValue: function (input) {
input.value = input.attributes.placeholder.nodevalue;
input.classname = Placeholder.className;
}
};
// Инициализировать все входы при инициализации страницы
// placeholder.init ();
// или установить элемент отдельно
// placeholder.create(document.getElementByid('t1 '));