8.Подсказки в поле ввода

[eugenem 11]

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

Достигается это простым скриптом, размещаемым прямо в теге input.

Теперь конкретные рекомендации:

1. Добавляем подсказку в бокс поиска. Находим в файле templates/наш шаблон/source/boxes/search.php строку:

$box->assign('INPUT_SEARCH', vam_draw_input_field('keywords', '', 'onkeyup="ajaxQuickFindUp(this);" id="quick_find_keyword"'));

[/CODE]


и меняем на

[CODE]

$box->assign('INPUT_SEARCH', vam_draw_input_field('keywords', 'Поиск по каталогу товаров...',

' onfocus="if (this.value==\'Поиск по каталогу товаров...\') this.value=\'\';"

onblur="if (this.value==\'\') {this.value=\'Поиск по каталогу товаров...\'}" '));

При этом перестанет работать Ajax-поиск. Но очень часто я и так его отключаю, не вписывается он в дизайн многих магазинов. 2. Добавляем подсказки в бокс логина. Находим в файле templates/наш шаблон/source/boxes/loginbox.php строчки:

$box->assign('FIELD_EMAIL', vam_draw_input_field('email_address', '', ''));

$box->assign('FIELD_PWD', vam_draw_password_field('password', '', ''));

[/code]


и меняем их на:

[CODE]

$box->assign('FIELD_EMAIL', vam_draw_input_field('email_address', 'e-mail', '

onfocus="if (this.value==\'e-mail\') this.value=\'\';" onblur="if (this.value==\'\'){this.value=\'e-mail\'}" '));

$box->assign('FIELD_PWD', vam_draw_password_field('password', 'password', '

onfocus="if (this.value==\'password\') this.value=\'\';" onblur="if (this.value==\'\'){this.value=\'password\'}" '));

В поле ввода пароля вместо password, понятное дело, будут отображаться звездочки.

[YuraS 4]

полезная информация. спасибо!

[KoVaLsKy 59]

мне больше нравится через скрипт placeholder это все делать. он и валидатор и подсказывать любит

[LordBelial 0]

Как сделать такую подсказку через placeholder в полях страницы обратной связи "Свяжитесь с нами"?

[support 447]

Например использовать bootstrap и bootstrap tooltip - http://getbootstrap.com/2.3.2/javascript.html#tooltips

[LordBelial 0]

спасибо ;)

[support 447]

Но нужно конечно понимать основы html, javascript, что б прикрутить.