搜索框效果

.df{color: gray;}

<div>请输入搜索关键词：<input type="text" value="请输入关键字" id="txtSearch" class="df" /></div>

$(function(){
$(‘#txtSearch‘).focus(function(){
if($.trim($(this).val())==‘请输入关键字‘){ //trim修剪
$(this).val(‘‘).removeClass(‘df‘);
}
}).blur(function(){
if($.trim($(this).val()).length==0){
$(this).val(‘请输入关键字‘).addClass(‘df‘);
}
});
});

搜索框效果

原文：http://www.cnblogs.com/DKL01/p/4882619.html