Подсказки в поле ввода в боксах логина и поиска (VAMshop)
Многие видели в полях ввода подсказки, которые исчезают при клике в это поле и возвращаются, когда фокус ушел в другое место. Такой прием экономит место и делает формы более понятными для пользователя.
Достигается это простым скриптом, размещаемым прямо в теге input. Например, для поля поисковой формы уместно написать “Введите слово для поиска”:
<input name="search" type="text" value="Введите слово для поиска" onfocus="if (this.value=='Введите слово для поиска') this.value='';" onblur="if (this.value==''){this.value='Введите слово для поиска'}" > |
Здесь, в общем-то, ничего нового. Но возникает вопрос, как их добавить в файлы шаблона. Если непосредственно добавить этот код, то возникает конфликт со smarty. Поэтому исходный код нужно немного модифицировать.
Теперь конкретные рекомендации:
- Добавляем подсказку в бокс поиска. Находим в файле templates/наш шаблон/source/boxes/search.php строку:
$box->assign('INPUT_SEARCH', vam_draw_input_field('keywords', '', 'onkeyup="ajaxQuickFindUp(this);" id="quick_find_keyword"'));
и меняем на
$box->assign('INPUT_SEARCH', vam_draw_input_field('keywords', 'Поиск по каталогу товаров...', ' onfocus="if (this.value==\'Поиск по каталогу товаров...\') this.value=\'\';" onblur="if (this.value==\'\') {this.value=\'Поиск по каталогу товаров...\'}" '));
При этом перестанет работать Ajax-поиск. Но очень часто я и так его отключаю, не вписывается он в дизайн многих магазинов.
- Добавляем подсказки в бокс логина. Находим в файле templates/наш шаблон/source/boxes/loginbox.php строчки:
$box->assign('FIELD_EMAIL', vam_draw_input_field('email_address', '', '')); $box->assign('FIELD_PWD', vam_draw_password_field('password', '', ''));
и меняем их на:
$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, понятное дело, будут отображаться звездочки.
-
пишет:Максим
Спасибо большое… оч долго не мог понять где инпут…!!!
-
пишет:Илья
Как исправить проблему с кодировкой?
при вводе русских символов в исходное значение формы они отображаются кракозябрами -
Алексей пишет:
Делайте проще. не все браузеры нормально до сих пор с javascript работают
в CSS задайте для инпута фоновую картинку в виде нужного текста. и обработайте событие hover
это более простой способ