значение затухания ввода и текстовой области
-
01-10-2019 - |
Вопрос
Я хочу иметь возможность делать что-то вроде
<input type="text" name="txtField" value="" title="input your text" />
<textarea name="areaField" title="input your long text"></textarea>
И заголовок автоматически исчезнет и вернется в качестве значения поля, в отличие от "поиска" здесь, в stackoverflow (прямо вверху, он только исчезает).
Я мог бы придумать javascript и использовать onblur
и onfocus
, но это было бы хлопотно и, я надеюсь, излишне.Предпочтительно, я бы установил только одну функцию для каждого ввода и ТЕКСТОВОЙ области в любом заданном файле, поэтому все, что мне нужно сделать, это настроить ее title
.
Первый вопрос:как это называется?
Главный вопрос:У кого-нибудь есть хорошее решение?А как насчет отсутствия jquery?Может быть, есть способ сделать это только с помощью CSS3, хотя я в этом сомневаюсь...
Решение
Если вас устраивает, что это работает только в более новых браузерах, вы могли бы использовать placeholder
атрибут в текстовом поле укажите заполнитель, который исчезнет при фокусировке и снова появится при размытии.Вы можете найти более подробную информацию в Погрузитесь в HTML5.
<input type="text" name="txtField" value="" placeholder="input your text" />
Если вы хотите, чтобы это работало в старых браузерах, вам, вероятно, придется реализовать заполнитель самостоятельно, например, в JavaScript.Вы можете найти все свои input
и textarea
элементы, использующие document.getElementsByTagName
и добавьте onfocus
и onblur
обработчики для каждого из тех, кто использует События DOM.
Другие советы
Хорошо, благодаря идеальному ответу Брайана, это код, с которым я придумал. Взял меня достаточно долго, чтобы сделать это работать:
<form>
<input type="text" name="txtField" value="" placeholder="input your text" />
<textarea name="areaField" placeholder="input your long text"></textarea>
</form>
<script type="text/javascript">
(function() {
ie_placeholder(document.getElementsByTagName('input'));
ie_placeholder(document.getElementsByTagName('textarea'));
function ie_placeholder (fields) {
for (var i = 0; i < fields.length; i++) {
var field = fields[i];
field.onfocus = function () {
if (this.value == this.placeholder) {
this.style.color = '';
this.value = '';
}
};
field.onblur = function () {
if (this.value == '' && this.placeholder != null) {
this.style.color = 'silver';
this.value = this.placeholder;
}
};
field.onblur();
}
}
})();
</script>
Просто положите его в конец формы, и вы должны быть в порядке. И, пожалуйста, используйте ваш любимый скрипт бокового сервера, чтобы удалить его из совместимых в HTML5 браузеров. То заполнитель атрибут будет просто работать над HTML5.