Часто разработчики задают вопрос, а как добавить текст-подсказку «Введите запрос» в поле поиска на сайте DNN?

Как правило, в своих проектах, я добавляю в скин следующий JavaScript:
$(document).ready(
function
(){
var
s=
'Search...'
;
$(
"#dnn_dnnSEARCH_txtSearch"
).val(s).click(
function
(){
var
ss=$(
this
).val();
if
(ss==s)$(
this
).val(
""
) }
)
.blur(
function
(){
var
ss=$(
this
).val();
if
(ss==
""
)$(
this
).val(s) }
);});
Теперь, когда пользователь установить курсор на поле, чтобы ввести поисковые слова, текст будет исчезать. И наоборот, после очистки поля будет отображаться подсказка в поле.
Но есть проблема. Если вы замените текст-подсказку «Search…» на русское слово «Введите запрос» и используете кодировку UTF-8, то русские слова будут отображаться в нечитабельной кодировке. Чтобы решить эту проблему внесем изменения в наш код:
$(document).ready(
function
(){
var
s=
''
;
$(
"#dnn_dnnSEARCH_txtSearch"
).val(s).click(
function
(){
var
ss=$(
this
).val();
if
(ss==s)$(
this
).val(
""
) }
)
.blur(
function
(){
var
ss=$(
this
).val();
if
(ss==
""
)$(
this
).val(s) }
);});
Как вы можете видеть, я заменил часть кода s='Search...'; на var s=''; для того, чтобы использовать механизм локализации, т.е. теперь текс-подсказка поставляется из ресурсного файла локализации скина по ключу «SearchTip». После внесения изменений в ресурсный файл локализации все будет отображаться корректно.
Для окончательного усовершенствования неплохо было бы добавить стили для разного отображения текста-подсказки и поискового запроса так, чтобы цвет шрифта текста-подсказки был «притушенным» (бледным) ну скажем с цветом #ccc, а поисковый запрос был черным (#000). Для этого внесем дополнительные изменения в код скрипта:
$(document).ready(
function
(){
var
s=
''
,f=$(
"#dnn_dnnSearch_txtSearchNew"
);
f.val(s).click(
function
(){
var
ss=$(
this
).val();
if
(ss==s)$(
this
).val(
""
);f.addClass(
"dk"
);}
)
.blur(
function
(){
var
ss=$(
this
).val();
if
(ss==
''
){$(
this
).val(s);f.removeClass(
"dk"
);}});
});
Как видно из кода, при событии установки курсора на поле будет добавляться дополнительный css-класс «dk» в объект поля, который содержит свойство color:#000, а при очистки поля и перевода курсора на другой объект интерфейса этот css-класс «dk» будет удаляться до первоначального набора css-классов с цветом шрифта #ccc.
Обратите внимание, что JavaScript использует JQuery.