Как убирать текст с полей при клике по ним
10.9.2008 – Рубрика: JavaScript
Как-то передо мной была поставлена задача – сделать, чтоб при клике по полю ввода стандартный текст внутри пропадал. То есть всем известно, что у полей формы есть параметр value, который задает, что будет выведено в поле. Но когда нужно что-то ввести в это поле, то нужно предварительно удалить текст, который задан через этот параметр. В этой заметке описан легкий способ, как сделать, чтоб текст, который в поле, пропадал сразу по клику по полю, чтоб не было необходимости удалять ручками текст заданный параметром value.
Все это реализируется таким простым образом:
<input type="text" id="email" name="email" value="Ваш текст"
onfocus="if (this.value=='Ваш текст') this.value='';"
onblur="if (this.value==''){this.value='Ваш текст'}" />
Трюк основан на использовании двух событий onfocus и onblur. onfocus выполняется, когда поле становится активным. onblur выполняется, когда поле теряет фокус. Далее следует проверка if (this.value=='Ваш текст') this.value=' '; которая проверяет если в поле стоит дефолтный текст, то при фокусе он убирается, позволяя пользователю ввести свои данные. Проверка в событии onblur возвращает дефолтный текст, если пользователь ничего не ввел в поле.
Нюанс состоит в том, что событие onblur и прочие должны писаться полностью с маленькой буквы, ибо написания вида onBlur, onFocus не проходят валидацию. Еще одним недостатком является то, что при отключении JavaScripтов пользователю придется ручками удалять текст из полей так, как события не будут работать.
Если на фирме сломался компьютер и вы не знаете что делать – заключите договор на обслуживание компьютеров в Москве. Специалисты осуществят быстрое и качественное обслуживание компьютеров, устранив все неисправности. Компания Консультант АйТи.
Tags: JavaScript
26 Отзывов to “Как убирать текст с полей при клике по ним”
Оставить отзыв
Последние записи
- DATA:URL – Картинки в документе без дополнительных запросов к серверу
(Вторник, 09. 8. 2009 – 20 отзывов) - Как изменить внешний вид checkbox
(Вторник, 04. 28. 2009 – 32 отзывов) - Как сделать галерею товаров для интернет-магазина
(Пятница, 03. 13. 2009 – 8 отзывов) - Я.ру
(Воскресенье, 03. 8. 2009 – 3 отзывов)
Октябрь 14, 2008 в 1:12
Код вытащен из стандартного шаблона Joomla 1.5. Укажите уж хотя бы откуда выдернули…
Поздравляю автора с таким умением. Америку открыли…
Октябрь 14, 2008 в 8:09
Рассмешил предыдущий комментарий. В стиле «основы джавы» придумали разработчики джумлы. События тоже они придумали? Этот код вытащен из мозгов и учебника который был еще до создания джумлы. Спасибо автору за напоминание.
Октябрь 19, 2008 в 17:52
{this.value=’Ваш текст’} зачем фигурные скобки? для красоты? тогда почему нет в первом обработчике события?
Октябрь 24, 2008 в 18:58
автор молодец хороший сайт двигай его дальше пополняй и совершенствуйся
удачи
Октябрь 24, 2008 в 21:11
Спасибо за лестный отзыв.
Буду стараться.
Декабрь 10, 2008 в 1:01
Было бы интересно почитать про способ управления полями не засоряя хтмл код, а из внешнего файла. Ведь не все цмс позволяют влезть в поле инпут. К примеру друпал. Вообще иметь библиотечку с внешними, легко настраиваемыми под себя скриптами, на мой взгляд, хорошая идея. Может кто знает где взять? Можно конечно и самому составить, но ведь этож время надо…
Декабрь 10, 2008 в 1:05
Вообще, довольно трудно уйти с блога. Очень много нового и полезного, по крайней мере для меня. Спасибо автору
Декабрь 17, 2008 в 23:59
Более «продвинутый» способ:
Декабрь 18, 2008 в 0:01
onfocus="this.title=(this.title ? this.title : this.value); this.value=(this.value==this.title ? '' : this.value);" onblur="this.value=(this.value=='' ? this.title : this.value);"Февраль 1, 2009 в 11:18
Хочу ответить на свой вопрос, заданный 10 декабря. Лучше всего использовать технику «ненавязчивого ява-скрипт». Можно реализовать с помощью библиотеки jquery. К примеру существует поле ввода с классом .pole, в этом случае нужно присоединить файл jquery и файл скрипта в котором запишем: $(function (){$(».pole»).bind(’focus’,function(event){this.value=»"})});
Все работает, очень элегантно и просто. Код не засорен обработчиками и выглядит красиво. Пользуйтесь.
Июнь 5, 2009 в 23:03
Zodios, спасибо за то, что чётко сформулировали тему, попавшую в заголовок страницы: перерыл пол-инета, пока наткнулся на Вашу страницу (искал по разным запросам в разных поисковиках). Правда, код использовал Ялекс’а – ему также большое спасибо.
Январь 19, 2010 в 3:44
СУПЕР! Спасибо!
Март 5, 2010 в 10:34
Спасибо автору!!!
Март 23, 2010 в 17:49
Спасибо огромное автору и Ялекс’у!
Апрель 15, 2010 в 10:15
Элегантное решение. Давно хотел разобраться в этой теме. Буду пользоваться, спасибо!
Сентябрь 26, 2010 в 14:19
Лучше так, без фигурных скобок, а то народ будет путаться.
Ноябрь 1, 2010 в 4:44
спасибо!) даже долго искать не пришлось) просто и быстро)
Ноябрь 23, 2010 в 1:16
Ялекс, говнокод какой-то ) №10, Александр, все правильно сказал. Биндить события – корректный путь.
Май 1, 2011 в 19:13
YO!
Пипец,как просто.
Я уже перекопал всё и кроме jQuery не реально это сделать….
Нужно глянуть в I7 работает и тогда это самое велеколепное решение.
Спасибо!
Май 1, 2011 в 19:59
Вообще КАК это вставить в TEXTAREA???
Февраль 3, 2012 в 11:14
спасибо автор! отличная статья.
Март 23, 2012 в 3:34
#20 +1 как это применить в Textarea?
Март 23, 2012 в 3:38
Отвечаю на свой же вопрос №22 и на вопрос № 20:
Message
Март 23, 2012 в 3:40
Че то не пошел код:(попробую так)
Message
Март 23, 2012 в 3:45
админ подчисти код плиз:
<textarea rows=»10″ cols=»10″ onfocus=»if (this.value==’Message’) this.value=»;»
onblur=»if (this.value==»){this.value=’Message’}» name=»mess»>Message</textarea>
Март 23, 2012 в 3:47
вощем это для Textarea » заменить на «