Исчезающий текст в форме поиска

Исчезающий текст в форме поиска (input)

Каждый человек хотя бы раз пользовался окном поиска на сайтах. В окне находится серый текст (это могут быть фразы “Поиск…”, “Найти…” или указания на то, что необходимо ввести в поле). При постановке курсора серый  текст исчезает, и пользователь может вводить необходимый запрос.

Итак, как самостоятельно задать этот исчезающий текст в формах input и textarea? Существуют два варианта, каждый из которых имеет свои преимущества и недостатки:  вариант первый предполагает использование атрибута html5 placeholder, второй же выполняется через javascript.

Вариант 1: html5 placeholder

В этом случае текст будет находиться внутри  поля и исчезать,  как только появится фокус. Метод удобен тем, что нет нужды применять js-решения, чтобы очистить само поле.  Вот пример кода:

Сам текст, который появится  в поле,  будет серого цвета. Фон и прочие настройки переносятся в соответствии со стилями, которые уже заданы для этого поля. Часто возникает необходимость изменить  стиль. Для этого  укажем css правила:

Недостаток этого способа в том, что код поддерживают не все браузеры. К примеру, Internet Explorer поддерживанет этот атрибут в более поздних версиях: начиная с 10 версии и старше.

Вариант 2:  javascript

Способ проверенный и надежный, может использоваться во многих браузерах, а потому актуален.  В данном – необходимо два обработчика для тега input.

onFocus — активируется, когда появляется  фокус: проверяется if, если при этом value поля  будет равен “Имя”, то в value будет присвоена пустая строка.

onBlur — работает наоборот — когда исчезает фокус.

Из недостатков: js-код необходимо прописывать непосредственно в html.

Поле textarea выполняется таким же образом.

Вывод:

Итак, способ первый — удобный, однако не всегда верно отображается  в браузерах — в некоторых может просто не поддерживаться. Второй способ более универсальный, но скорее всего код значительно увеличится, если полей input и textarea много.


Оставить комментарий