значение затухания ввода и текстовой области

Question

Я хочу иметь возможность делать что-то вроде

<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, хотя я в этом сомневаюсь...

Answer 1

Если вас устраивает, что это работает только в более новых браузерах, вы могли бы использовать placeholder атрибут в текстовом поле укажите заполнитель, который исчезнет при фокусировке и снова появится при размытии.Вы можете найти более подробную информацию в Погрузитесь в HTML5.

<input type="text" name="txtField" value="" placeholder="input your text" />

Если вы хотите, чтобы это работало в старых браузерах, вам, вероятно, придется реализовать заполнитель самостоятельно, например, в JavaScript.Вы можете найти все свои input и textarea элементы, использующие document.getElementsByTagName и добавьте onfocus и onblur обработчики для каждого из тех, кто использует События DOM.

Answer 2

Хорошо, благодаря идеальному ответу Брайана, это код, с которым я придумал. Взял меня достаточно долго, чтобы сделать это работать:

<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.