文本输入框点击和失焦

鼠标点击文本输入框时，默认内容消失。当文本输入框未录入内容时，文本输入框失焦，则默认内容重新出现。

<input type="text" class="sousuo" id="txtKeyWord" name="txtKeyWord" value=" 输入您想搜索的问题关键字，如“发表”" οnclick="if(this.value==' 输入您想搜索的问题关键字，如“发表”'){this.value=''}" οnblur="if(this.value==''){this.value=' 输入您想搜索的问题关键字，如“发表”'}" />

以上是简单的实现。

当需要考虑到用户输入空格的情况下，则需要替换掉空格

<input type="text" class="sousuo" id="txtKeyWord" name="txtKeyWord" value=" 输入您想搜索的问题关键字，如“发表”" οnclick="if(this.value==' 输入您想搜索的问题关键字，如“发表”' || this.value.replace(/\s/g,'').length == 0){this.value=''}" οnblur="if(this.value.replace(/\s/g,'').length == 0){this.value=' 输入您想搜索的问题关键字，如“发表”'}" />

 

如果再加上javascript判断以及提交

function onSearch(){
	var search = jQuery("#txtKeyWord").val();
	if(search == " 输入您想搜索的问题关键字，如“发表”" || search.replace(/\s/g,"").length == 0){
		jQuery("#txtKeyWord").css("color","red");
		return ;
	}
	document.getElementById("frmSearch").submit();
}

 

同时也需要改变文本输入框的默认字体颜色

<form method="post" id="frmSearch" name="frmSearch" action="${ path }/search/list.do">        
               <label>问题搜索: </label>
               <input type="text" class="sousuo" id="txtKeyWord" name="txtKeyWord" value=" 输入您想搜索的问题关键字，如“发表”" οnclick="if(this.value==' 输入您想搜索的问题关键字，如“发表”' || this.value.replace(/\s/g,'').length == 0){this.value='';this.style.color='#666666'}" οnblur="if(this.value.replace(/\s/g,'').length == 0){this.value=' 输入您想搜索的问题关键字，如“发表”';this.style.color='#666666'}" />
               <input type="button" class="btn" οnclick="onSearch();"/>
        </form>