Как убирать текст с полей при клике по ним

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:

15 Отзывов to “Как убирать текст с полей при клике по ним”

  1. Игорь:
    Октябрь 14, 2008 в 1:12

    Код вытащен из стандартного шаблона Joomla 1.5. Укажите уж хотя бы откуда выдернули…
    Поздравляю автора с таким умением. Америку открыли…

  2. Lolla:
    Октябрь 14, 2008 в 8:09

    Рассмешил предыдущий комментарий. В стиле «основы джавы» придумали разработчики джумлы. События тоже они придумали? Этот код вытащен из мозгов и учебника который был еще до создания джумлы. Спасибо автору за напоминание.

  3. Jman:
    Октябрь 19, 2008 в 17:52

    {this.value=’Ваш текст’} зачем фигурные скобки? для красоты? тогда почему нет в первом обработчике события?

  4. sss:
    Октябрь 24, 2008 в 18:58

    автор молодец хороший сайт двигай его дальше пополняй и совершенствуйся
    удачи

  5. Zodios:
    Октябрь 24, 2008 в 21:11

    Спасибо за лестный отзыв.
    Буду стараться.

  6. Александр:
    Декабрь 10, 2008 в 1:01

    Было бы интересно почитать про способ управления полями не засоряя хтмл код, а из внешнего файла. Ведь не все цмс позволяют влезть в поле инпут. К примеру друпал. Вообще иметь библиотечку с внешними, легко настраиваемыми под себя скриптами, на мой взгляд, хорошая идея. Может кто знает где взять? Можно конечно и самому составить, но ведь этож время надо…

  7. Александр:
    Декабрь 10, 2008 в 1:05

    Вообще, довольно трудно уйти с блога. Очень много нового и полезного, по крайней мере для меня. Спасибо автору

  8. Ялекс:
    Декабрь 17, 2008 в 23:59

    Более «продвинутый» способ:

  9. Ялекс:
    Декабрь 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);"

  10. Александр:
    Февраль 1, 2009 в 11:18

    Хочу ответить на свой вопрос, заданный 10 декабря. Лучше всего использовать технику «ненавязчивого ява-скрипт». Можно реализовать с помощью библиотеки jquery. К примеру существует поле ввода с классом .pole, в этом случае нужно присоединить файл jquery и файл скрипта в котором запишем: $(function (){$(».pole»).bind(’focus’,function(event){this.value=»"})});
    Все работает, очень элегантно и просто. Код не засорен обработчиками и выглядит красиво. Пользуйтесь.

  11. Олег:
    Июнь 5, 2009 в 23:03

    Zodios, спасибо за то, что чётко сформулировали тему, попавшую в заголовок страницы: перерыл пол-инета, пока наткнулся на Вашу страницу (искал по разным запросам в разных поисковиках). Правда, код использовал Ялекс’а – ему также большое спасибо.

  12. facetus:
    Январь 19, 2010 в 3:44

    СУПЕР! Спасибо!

  13. xpym-xpym:
    Март 5, 2010 в 10:34

    Спасибо автору!!!

  14. juli:
    Март 23, 2010 в 17:49

    Спасибо огромное автору и Ялекс’у!

  15. Игорь:
    Апрель 15, 2010 в 10:15

    Элегантное решение. Давно хотел разобраться в этой теме. Буду пользоваться, спасибо!

Оставить отзыв

Последние записи

Цифровая печать - Оперативная полиграфия T-Print, печать визиток, флаеров, бланков. Веб-дизайн сайтов В розницу с доставкой цифровые камеры ноутубки Asus Днепропетровск выбрать камеру. , Лучшие производители - экскаватор хитачи. , гидромассажные спа , Быстрое остекление балконов киев, без вони! , весь год бамбуковые ролеты киев закупает в Европе , Материалы для утепления фасада ускоряют отделку дома!