Задача:
Нужно в форме поиска вставить в поле текст "Поиск по сайту", который исчезает при клике мышью, то есть, когда курсор попрадет в это поле и поле получает фокус.
Решение:
Исчезающая подсказка в строке поиска силами JavaScript
В файле template.php текущей темы добавить (или изменить) функцию:
function phptemplate_preprocess_search_theme_form(&$vars, $hook) {
$form_default = t('Search');
$vars['form']['search_theme_form']['#value'] = $form_default;
$vars['form']['search_theme_form']['#attributes'] = array(
'onblur' => "if (this.value == '') {this.value = '{$form_default}';}",
'onfocus' => "if (this.value == '{$form_default}') {this.value = '';}"
);
}
$form_default = t('Search');
$vars['form']['search_theme_form']['#value'] = $form_default;
$vars['form']['search_theme_form']['#attributes'] = array(
'onblur' => "if (this.value == '') {this.value = '{$form_default}';}",
'onfocus' => "if (this.value == '{$form_default}') {this.value = '';}"
);
}
Использование jQuery для сокрытия подсказке в строке поиска
- Включить в настройках текущей темы показ строки поиска - см. admin/build/themes/settings
- В файле template.php текущей темы добавить (или изменить) функцию:
function phptemplate_preprocess_search_theme_form(&$vars, $hook) {
$theme_path = drupal_get_path('theme', 'arthemia');
$vars['form']['search_theme_form']['#value'] = t('Search');
drupal_add_js($theme_path. '/search_box.js');
} - Создать в папке текущей темы файл с именем search_box.js с кодом:
var active_color = '#000'; // Colour of user provided text
var inactive_color = '#ссс'; // Colour of default text
$(document).ready(function() {
$("input.form-text").css("color", inactive_color);
var default_values = new Array();
$("input.form-text").focus(function() {
if (!default_values[this.id]) {
default_values[this.id] = this.value;
}
if (this.value == default_values[this.id]) {
this.value = '';
this.style.color = active_color;
}
$(this).blur(function() {
if (this.value == '') {
this.style.color = inactive_color;
this.value = default_values[this.id];
}
});
});
});
Использованные материалы:
Полезные ссылки:
Bookmark/Search this post with
