Часто разработчики задают вопрос, а как добавить текст-подсказку «Введите запрос» в поле поиска на сайте 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.