На странице расположена таблица с некоторыми данными. Над ней фильтр с полем ввода и кнопкой найти. Изначально в поле ввода значение «Поиск…», при наведении фокуса значение пропадает. На то, какое поле ввода будет обрабатываться, будет указывать с помощью класса.
Код jsf:
<h:inputText value=»#{searchInfo.searchName}» styleClass=»search-value-container» />
<h:commandLink value=» #{resources['command.FIND']} » action=»#{searchInfo.find}» />
Класс search-value-container указывает на то, что наведение и уход фокуса будут обрабатываться у inputText.
В бине :
public String getSearchName() {
if (getName() == null || getName().equals(«»)) {
return Util.getResource(Messages.SEARCH_CODE) ;
}
return getName();
}
public void setSearchName(String name) {
if (name == null || name.equals(Util.getResource(Messages.SEARCH_CODE)) || name.equals(«»)) {
setName(null);
} else {
setName(name.trim()) ;
}
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
Код JS для обработки фокуса:
var el = new Array() ;
var searchValue = «» ;
function getElementsByClassName(className, tag, elm){
var testClass = new RegExp(«(^|\\s)» + className + «(\\s|$)»);
var tag = tag || «*» ;
var elm = elm || document ;
var elements = (tag == «*» && elm.all) ? elm.all : elm.getElementsByTagName(tag) ;
var returnElements = [] ;
var current ;
var length = elements.length ;
for ( var i = 0; i < length; i ++) {
current = elements[i] ;
if (testClass.test(current.className)) {
returnElements.push(current) ;
}
}
return returnElements ;
}
function focusSearch() {
if (this.value == searchValue) {
this.value = «» ;
}
}
function blurSearch() {
if (this.value == «») {
this.value = searchValue ;
}
}
function load() {
var allElements = getElementsByClassName(’search-value-container’, null, null) ;
for (var i = 0; i < allElements.length; i ++) {
el[i] = allElements[i] ;
if (el[i]) {
el[i].onfocus = focusSearch ;
el[i].onblur = blurSearch ;
}
}
}
window.onload = load ;
Для того, чтобы указать, какое значение должно быть в поле ввода, необходимо перед inputText’ом поместить
<t:jsValueSet name=»searchValue» value=»#{resources['message.SEARCH_CODE']}» />