Опубликовано автор в категориях Верстальщику.


Честно говоря, долго думал, писать или не писать этот пост. Но все-таки решил написать, поскольку в своей работе мне часто приходится использовать эти приемы и они у меня есть в коллекции сниппетов. Поэтому я решил поделится ими со всеми, кто еще не использует приятные и полезные мелочи для улучшения удобства использования форм.

Например, когда вы используете HTML-формы часто желательно предварительно заполнить некоторые поля ввода. Делается это для того, чтобы дать вашим посетителям некоторым ключом к тому, что они должно заполнить в данном поле ввода. Просто не всегда есть место для лейблов к полям, или дизайнерское решение не предусматривает их наличие, а пользователь в 99% очень хочет знать что ему надо написать в данном этом поле. Самый простой способ это придать полю нужное значение, вот так:


Но это не совсем удобно и иногда пугает пользователя, поэтому когда пользователь нажимает на поле желательно удалить значение для примера, чтобы человек без проблем заполнил поле. Сделать это можно добавив onclick команду JavaScript к полю:

<form>
    <input onclick="this.value=''" type="text" value="Ваша почта" />
</form>

Способ хорошо, но не совсем корректен, так как пользователь может перейти в поле не только кликом мыши, но и другими способами, например, нажатием клавиши «Tab». Тогда нам лучше добавить другой обработчик, чтобы сделать наше решение более универсальным, а именно onfocus :

<form>
    <input onfocus="this.value=''" type="text" value="Ваша почта" />
</form>

Вроде бы, работает хорошо. Однако есть еще проблема. Когда пользователь заполняет свой адрес электронной почты, проходит далее по форме, а потом возвращается к полю чтобы исправить значение, то его адрес будет удален полностью! Для того, что бы этого не случилось, нам нужно добавить небольшую проверку содержимого поля:

<form>
    <input type="text" value="Ваша почта" onfocus="if (this.value == 'Ваша почта') {this.value=''}" />
</form>

Рабочее решение

Хорошо, это работает. Однако, когда посетитель примет решение не вводить каких-либо данных, поле остается пустым. Естественно, что при отсутствии лейблов этого делать нельзя, так ка пользователь просто забудет, что вводить в этом поле. Мы исправить путем восстановления значения по умолчанию, когда пользователь покинул поле ввода без добавления данных:

<form>
    <input type="text" value="Ваша почта" onblur="if(this.value == '') { this.value='Ваша почта'}" onfocus="if (this.value == 'Ваша почта') {this.value=''}" />
</form>

А теперь, несколько «вкусностей»

Выбор по клику

Но иногда простых решений мало. Бывает что пользователю удобнее не просто сменить подсказку в поле на свои данные, а частично отредактировать имеющиеся, чтобы получить свое значение, например, откорректировать предложенный запрос в поле поиска.

Подсвечивая содержание поля ввода, пользователь может выбрать часть текста с помощью мыши или управления курсором.

<form>
    <input onfocus="this.select()" type="text" value="Запрос для примера" />
</form>

Динамическая смена цвета ввода

И еще одно улучшение. Допустим, вы хотите чтобы текст который вводит пользователь отличался от текста в примере и менялся на onclick. Вот рабочее решение:

<form>
    <input style="color: #f00" type="text" value="Ваша почта" onblur="if(this.value == '') { this.style.color='#f00'; this.value='Ваша почта'}" onfocus="if (this.value == 'Ваша почта') {this.style.color='#0f0'; this.value=''}" />
</form>

Однако, имейте в виду, что это может создать и дополнительные проблемы, если вы перезагрузите страницу. Некоторые браузеры будут помнить значения поля ввода, а цвет будет отличаться даже если поле не содержит значение по умолчанию. Это можно решить с помощью исправления бага через обработчик событий onload DOM дерева документа. Однако… Это уже совсем другая история.

P.S. Мысли не только на русском…

1-studio.de schreibt: die Branche Internetagentur und Webdesign ist in Deutschland sehr populaer. Webseitengestaltung in Deutschland, NRW.

Если вы владеете немецким, то догадались, что речь идет о разработке сайтов. Однако не только зарубежным студиям дано рекламировать свои услуги. Подержим отечественного сайтопроизводитля, поскольку разработка сайтов в Днепропетровске ничуть не хуже чем в Германии.выкуп авто дэу

4 комментария к записи “Полезные, приятные javascript мелочи для улучшения форм”

  1. Hiway

    Да, хороший сниппет. Если проект на jQuery, то приведенные мной примеры не нужны. а Если нет, то пригодятся 🙂

    Ответить
  2. Алексей

    Огромное спасибо! Я долго не мог понять как сделать чтобы поле не очищалось при его втором выделение. Автор держи плюсик 😎

    Ответить

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

  • (не будет показан)