2 077 Каждый человек хотя бы раз пользовался окном поиска на сайтах. В окне находится серый текст (это могут быть фразы “Поиск…”, “Найти…” или указания на то, что необходимо ввести в поле). При постановке курсора серый текст исчезает, и пользователь может вводить необходимый запрос.
Итак, как самостоятельно задать этот исчезающий текст в формах input и textarea? Существуют два варианта, каждый из которых имеет свои преимущества и недостатки: вариант первый предполагает использование атрибута html5 placeholder, второй же выполняется через javascript.
Вариант 1: html5 placeholder
В этом случае текст будет находиться внутри поля и исчезать, как только появится фокус. Метод удобен тем, что нет нужды применять js-решения, чтобы очистить само поле. Вот пример кода:
|
1 |
<input type="text" placeholder="исчезающий текст"> |
Сам текст, который появится в поле, будет серого цвета. Фон и прочие настройки переносятся в соответствии со стилями, которые уже заданы для этого поля. Часто возникает необходимость изменить стиль. Для этого укажем css правила:
|
1 2 3 4 5 6 7 8 |
input::-webkit-input-placeholder{ color:red; /* для webkit браузеров */ } input:-moz-placeholder { font-style: italic; /* для браузеров mozilla */ } /*Обратите внимание в варианте с mozzila двоеточие стоит одно*/ |
Недостаток этого способа в том, что код поддерживают не все браузеры. К примеру, Internet Explorer поддерживанет этот атрибут в более поздних версиях: начиная с 10 версии и старше.
Вариант 2: javascript
Способ проверенный и надежный, может использоваться во многих браузерах, а потому актуален. В данном – необходимо два обработчика для тега input.
onFocus — активируется, когда появляется фокус: проверяется if, если при этом value поля будет равен “Имя”, то в value будет присвоена пустая строка.
onBlur — работает наоборот — когда исчезает фокус.
|
1 |
<input onFocus="if(this.value=='Имя') this.value='';" onBlur="if(!this.value) this.value='Имя';" type="text" value="Имя"/> |
Из недостатков: js-код необходимо прописывать непосредственно в html.
Поле textarea выполняется таким же образом.
Вывод:
Итак, способ первый — удобный, однако не всегда верно отображается в браузерах — в некоторых может просто не поддерживаться. Второй способ более универсальный, но скорее всего код значительно увеличится, если полей input и textarea много.
