Текст в input по умолчанию и про автозамену
Если внимательно посмотреть на мой попап (на момент написания статьи он плавно появляется в верхнем правом углу), конечно, если ты не успел его еще закрыть, то увидишь, что при фокусе полей ввода почты и имени, надписи, написанные там, автоматически исчезают.
Тоже самое могу сказать и про форму поиска на моем сайте (находится в шапке) – по умолчанию там написано "Введите поисковую фразу…", и если ты сейчас попробуешь нажать на ней кнопкой мыши – надпись автоматически пропадет.
Все потому, что у меня настроено автозамена текста в input.
Текст в input по умолчанию
Input – это тот самый тег, который выводит поля ввода информации и кнопки в формах (кнопку еще можно задать при помощи тега button).
Так вот, значения по умолчанию можно установить при помощи атрибута value:
<input type="text" value="Значение по умолчанию">
Где атрибут type="text" – задает тип input – в данном случае – это текстовое поле.
А атрибут value – значение по умолчанию.
Пример этого текстового поля вы можете наблюдать ниже:
Вроде бы все отлично, в поле появился нужный нам текст. Но проблема в том, что при фокусе (активации поля для ввода текста) – он не пропадет как у меня в форме поиска или попапе.
Таким образом, вашим посетителям – этот текст будет доставлять маленькое, но все же – неудобство.
А ведь иногда просто необходимо, что бы текст в полях выступал в качестве подсказок. И здесь, я хочу вам показать, как можно одним легким способом решить эту проблему.
И в этом нам поможет 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 становится пустым. И если пользователь не ввел в это поле никакой информации и снял с него фокус, то полю автоматически будет присвоено старое значение по умолчанию.
Если же посетитель ввел там какую то информацию и переключился на другое поле для заполнения, то данные, внесенные им останутся там без изменений.
Вот пример полей на моем попапе. Если что - можно потыкать, или подписаться :
Вот так вот все просто!
Надеюсь, эта информация оказалась для тебя полезной или просто понравилась?
Если так - прошу поделиться с ней друзьями.
Просто нажми на одну или несколько кнопок ниже!
Эта информация действительно оказалась для меня полезной!
Добрый день. А вот что делать, если поле обязательно для заполнения? При этом, если пользователь ничего не вводил, то никакой ошибки не происходит. Просто присылается "значение по умолчанию".
Ну это один из недостатков такого подхода.
Зато он работает в каждом браузере.
Хром 22.0.1229.79 m - не работает
Приношу извинения, по ходу прочтения понял, что инпут в статье не должен работать
Spasibo! ;)
Супер инфа. Мне очень пригодилась. Спасибо Вам...
Серёга , СПАСИБО!
Я думаю можно сделать сразу проверку на != Значение по умолчанию
А не проще прописать ?
И проверка на заполненность (этот текст не отправится), и при написании текст подсказки исчезает.
А не проще прописать ?
И проверка на заполненность (этот текст не отправится), и при написании текст подсказки исчезает.
Вадим, посмотри на дату этого поста Когда он писался, placeholder работал с горем пополам только в половине браузеров.
А так да - ты молодец. Сейчас это актуальнее.
Самое забавное что скрипт в статье не работает, а вот скрипт с сайта, там где просят подписаться на видеокурс работает прелестно. Просто залез скопировал в исходном коде. Так что Слава Энжели Дэвис и удачи!!!
Аффтару за подсказку - пять, а за внимательность - неуд.
В одном случае value='Значение по умолчанию', а в другом value=' Значение по умолчанию'. Ай, молодца!
Добрый день.
Помогите пожалуйста решить проблему: на моем сайте, если перейти на любую страницу, где есть комментарии, то при пролистывании страницы вниз поле для комментариев просто исчезает(его "съедает" подвал страницы). В чем может быт ьпроблема? вот ссылка на сайт chaypret . ru
НЕ реклама. Просто зайдите на страницу где есть комментарии, медленно листайте ее и увидите что поле исчезает.