Текст в input по умолчанию и про автозамену

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

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

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

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

Тренинг по вёрстке сайта на HTML5 и CSS3

Текст в 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 :








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

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

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

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

Комментариев: 15 RSS

Тренинг по вёрстке сайта на HTML5 и CSS3
Оставьте комментарий!

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

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

Комментариев: 15
  •  Александр | 30 января 2012 в 18:26:41

    Эта информация действительно оказалась для меня полезной!yes

  •  Damian | 9 июля 2012 в 13:26:55

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

  •  Серёга | 11 июля 2012 в 09:49:23

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

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

  •  Степан | 30 сентября 2012 в 19:33:14

    Хром 22.0.1229.79 m - не работает

  •  Степан | 30 сентября 2012 в 19:34:31

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

  •  Adrian Y | 19 февраля 2013 в 07:05:39

    Spasibo! ;)

  •  Евгений | 25 октября 2013 в 13:22:52

    Супер инфа. Мне очень пригодилась. Спасибо Вам...

  •  Комментатор 754 | 13 января 2014 в 23:44:57

    Серёга , СПАСИБО!

  •  TeiV | 17 января 2014 в 21:08:49
    Добрый день. А вот что делать, если поле обязательно для заполнения? При этом, если пользователь ничего не вводил, то никакой ошибки не происходит. Просто присылается "значение по умолчанию"

    Я думаю можно сделать сразу проверку на != Значение по умолчанию

  •  Вадим | 22 ноября 2014 в 05:03:04

    А не проще прописать ?

    И проверка на заполненность (этот текст не отправится), и при написании текст подсказки исчезает.

  •  Вадим | 22 ноября 2014 в 05:04:07

    А не проще прописать ?

    <input type="text" name="name" required placeholder="Например введите имя" />

    И проверка на заполненность (этот текст не отправится), и при написании текст подсказки исчезает.

  •  Серёга | 22 ноября 2014 в 06:40:15

    Вадим, посмотри на дату этого поста smile Когда он писался, placeholder работал с горем пополам только в половине браузеров.

    А так да - ты молодец. Сейчас это актуальнее.

  •  Андрей Варабей | 10 декабря 2015 в 22:11:34

    Самое забавное что скрипт в статье не работает, а вот скрипт с сайта, там где просят подписаться на видеокурс работает прелестно. Просто залез скопировал в исходном коде. Так что Слава Энжели Дэвис и удачи!!!

  •  Антон | 17 марта 2016 в 10:22:45

    Аффтару за подсказку - пять, а за внимательность - неуд.

    В одном случае value='Значение по умолчанию', а в другом value=' Значение по умолчанию'. Ай, молодца!

  •  Серго | 22 октября 2016 в 15:31:35

    Добрый день.

    Помогите пожалуйста решить проблему: на моем сайте, если перейти на любую страницу, где есть комментарии, то при пролистывании страницы вниз поле для комментариев просто исчезает(его "съедает" подвал страницы). В чем может быт ьпроблема? вот ссылка на сайт chaypret . ru

    НЕ реклама. Просто зайдите на страницу где есть комментарии, медленно листайте ее и увидите что поле исчезает.