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

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

1 голос
/ 25 августа 2010

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

<input type="text" name="txtField" value="" title="input your text" />
<textarea name="areaField" title="input your long text"></textarea>

И заголовок автоматически исчезнет и вернется в качестве значения поля, в отличие от «поиска» здесь в stackoverflow (справа вверху,это только исчезает).

Я мог бы придумать javascript и использовать onblur и onfocus, но это было бы хлопотно, и я надеюсь, излишне.Желательно, чтобы я установил только одну функцию для каждого INPUT и TEXTAREA в любом данном файле, поэтому все, что мне нужно сделать, это настроить его title.

Первый вопрос : чтоназвание для этого?

Главный вопрос : У кого-нибудь есть хорошее решение?Как насчет без jquery?Может быть, есть способ сделать это только с помощью CSS3, хотя я сомневаюсь в этом ...

Ответы [ 2 ]

3 голосов
/ 25 августа 2010

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

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

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

0 голосов
/ 26 августа 2010

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

<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-совместимых браузеров. Атрибут placeholder будет работать только в HTML5 .

...