Автозамена текста в input.

Суббота, 28 января 2012 года в 17:11      Просмотров: 3300

Автоудаление текста в input

Если внимательно посмотреть на мой попап (на момент написания статьи он плавно появляется в верхнем правом углу), конечно, если ты не успел его еще закрыть, то увидишь, что при фокусе полей ввода почты и имени, надписи, написанные там, автоматически исчезают.

Тоже самое могу сказать и про форму поиска на моем сайте (находится в шапке) – по умолчанию там написано "Введите поисковую фразу…", и если ты сейчас попробуешь нажать на ней кнопкой мыши – надпись автоматически пропадет.

Все потому, что у меня настроено автозамена текста в input.

Input – это тот самый тег, который выводит поля ввода информации и кнопки в формах (кнопку еще можно задать при помощи тега button).

Так вот, значения по умолчанию можно установить при помощи атрибута value:


<input type="text" value="Значение по умолчанию">

Где атрибут type="text" – задает тип input – в данном случае – это текстовое поле.

А атрибут value – значение по умолчанию.

Пример этого текстового поля вы можете наблюдать ниже:




Вроде бы все отлично, в поле появился нужный нам текст. Но проблема в том, что при фокусе (активации поля для ввода текста) – он не пропадет как у меня в форме поиска или попапе. no

Таким образом, вашим посетителям – этот текст будет доставлять маленькое, но все же – неудобство.

А ведь иногда просто необходимо, что бы текст в полях выступал в качестве подсказок. И здесь, я хочу вам показать, как можно одним легким способом решить эту проблему.

И в этом нам поможет Javascript!

Нам всего то и надо, что добавить строчку кода:


<input type="text" value="Значение по умолчанию" onfocus="if (this.value == ' Значение по умолчанию') {this.value = '';}" onblur="if (this.value == '') {this.value = ' Значение по умолчанию';}">

    Ну а теперь немного расшифровки, что бы было понятно, как все это дело работает:

  • onfocus – указываем, что скрипт будет работать при фокусе на поле.
  • код ниже означает, что если значение value тега input равняется "Значение по умолчанию" – то ему присваивается пустое значение.
  • if (this.value == ' Значение по умолчанию') {this.value = '';}
  • А вот эта строка является проверяющей.
  • onblur="if (this.value == '') {this.value = ' Значение по умолчанию';}

    Т.е. когда пользователь сфокусировался – значение value становится пустым. И если пользователь не ввел в это поле никакой информации и снял с него фокус, то полю автоматически будет присвоено старое значение по умолчанию.

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

Вот пример полей на моем попапе. Если что - можно потыкать, или подписаться cool smile :








Вот так вот все просто!

Надеюсь, эта информация оказалась для тебя полезной или просто понравилась?

Если так - прошу поделиться с ней друзьями.

Просто нажми на одну или несколько кнопок ниже!

Комментариев: 6

Добрый день. А вот что делать, если поле обязательно для заполнения? При этом, если пользователь ничего не вводил, то никакой ошибки не происходит. Просто присылается "значение по умолчанию".

Ну это один из недостатков такого подхода.

Зато он работает в каждом браузере.

5. Степан
2012-09-30 в 19:34:31

Приношу извинения, по ходу прочтения понял, что инпут в статье не должен работать

Оставьте комментарий!

Вы можете войти под своим логином или зарегистрироваться на сайте.

Авторизация MaxSiteAuth. Войти через loginza

(обязательно)