Исчезающий текст в input
Не так давно у меня спросили, как сделать исчезающий текст в input. То есть чтобы изначально было некое слово написано в текстовом поле (какая-нибудь подсказка, например), а при клике оно стиралось. При этом ещё чтобы и менялся цвет, то есть был изначально бледно-серный, а текст, который вводит пользователь, становился чёрным. Вот как такое сделать, мы с Вами разберём в этой статье.
В основе лежит достаточно простой JavaScript, который можно уместить прямо в самом теге input:
<input type="text" name="name" style="color: #777;" value="Ваше имя" onfocus="if (this.value == 'Ваше имя') {this.value = ''; this.style.color = '#000';}" onblur="if (this.value == '') {this.value = 'Ваше имя'; this.style.color = '#777';}" />
Поясняю алгоритм. Вначале у нас в поле серым цветом написано "Ваше имя". При получении фокуса на это поле вызывается обработчик события onfocus, в котором мы проверяем, если значение поля равно "Ваше имя", мы его стираем, плюс устанавливаем чёрный цвет. Если там написано что-то другое (пользователь ранее написал), то ничего не делаем.
При потере фокуса вызывается onblur, в котором мы смотрим значение текстового поля, и если оно пустое, то устанавливаем "Ваше имя" и ставим серый цвет.
Я рекомендую Вам просто скопировать данный код и посмотреть на его работу, чтобы Вы поняли, как он действует, а уже, поняв его работу, разобраться в данном алгоритме не составит никакого труда.
Вот таким нехитрым образом делается исчезающий текст в input.
-
Создано 19.12.2012 11:03:07
-
Михаил Русаков
Комментарии (11):
можно было бы просто воспользоваться атрибутом placeholder, но как всегда он не работает в ie
Ответить
так это HTML 5
Ответить
Мне этот способ очень не нравится, т.к в нем имеется небольшой глюк, во есть <input type='text' value='Введите слова для поиска' onfocus='удали_подсказку(this)' onblur='покажи_подсказку(this)'/> Набираешь в поиске 'Введите слова для поиска', убираешь фокус для какий-то дел, ставишь фокус на текстовое поле и... почему удалился текст? Мне кажется что здесь нужно либо делать вторую проверку на цвет текста или ставить полю класс с тем что оно с подсказкой
Ответить
Беда в том,что для type="password" так сделать нельзя!
Ответить
Согласен с Михаилом. В случае введения текста, на который идет проверка, скрипт будет работать некорректно. Дополнительно добавлять проверку на цвет не стоит - ее можно сделать основной, так как конечный пользователь не может изменять цвета текста в поле ввода.
Ответить
Михаил дал вам основы, а доработать скрипт как вам надо вы можете и сами
Ответить
Кстати есть одно существенное предложение, было бы гораздо интересней, если бы ты сделал сразу пример работы скрипта.А то если честно суховато! Сведения очень полезные, но лучше если сразу у читателя есть возможность увидеть, пощелкать, ощутить. У тебя есть картинка под подзаголовком, вот преврати ее в input . Ну это мое пожелание :)
Ответить
А еще вопросик,планируется ли в будущем выход курса по JS, AJAX и jQuery ?
Ответить
Да, в конце июня будет.
Ответить
У меня вопрос начинающего: Почему указанный код (исчезающий текст в input.) не обрамляется тегом <script ...> Мало того. Когда я включил его в HTML-код, то (исчезающий текст в input.) вообще не работает. Спасибо
Ответить
Потому что в значении атрибутов не надо указывать <script>.
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.