Подсказки в поле ввода в боксах логина и поиска (VAMshop)

08.10.2010 | Написал

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

Достигается это простым скриптом, размещаемым прямо в теге input. Например, для поля поисковой формы уместно написать «Введите слово для поиска»:

<input name="search" type="text" value="Введите слово для поиска"
onfocus="if (this.value=='Введите слово для поиска') this.value='';"
onblur="if (this.value==''){this.value='Введите слово для поиска'}" >

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

  1. Добавляем подсказку в бокс поиска. Находим в файле 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-поиск. Но очень часто я и так его отключаю, не вписывается он в дизайн многих магазинов.

  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', '', ''));

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

    $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, понятное дело, будут отображаться звездочки.

Метки: ,
3 комментария читателей статьи "Подсказки в поле ввода в боксах логина и поиска (VAMshop)"
  • Максим пишет:

    Спасибо большое… оч долго не мог понять где инпут…!!!

  • Илья пишет:

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

  • Алексей пишет:

    Делайте проще. не все браузеры нормально до сих пор с javascript работают
    в CSS задайте для инпута фоновую картинку в виде нужного текста. и обработайте событие hover
    это более простой способ

Добавить комментарий

Ваш e-mail не будет опубликован.