首页 / 脚本样式 / JavaScript / 基于jQuery的输入框无值自动显示指定数据的实现代码

【解决方案】

1. 准备工作

（1）输入框
复制代码 代码如下:
<input type="text" name="searchText" title="请输入搜索关键字" />

（2）CSS代码
复制代码 代码如下:
input.helpText { color: #aaa;}

（3）转换方法
复制代码 代码如下:
function switchText（）
{
if （$（this）.val（） == $（this）.attr（"title"））
$（this）.val（""）.removeClass（"helpText"）;
else if （$.trim（$（this）.val（）） == ""）
$（this）.addClass（"helpText"）.val（$（this）.attr（"title"））;
}

（4）具体实现
复制代码 代码如下:
$（"input[type=text][title！=""]"）.each（function（） {
if （$.trim（$（this）.val（）） == ""） $（this）.val（$（this）.attr（"title"））;
if （$（this）.val（） == $（this）.attr（"title"）） $（this）.addClass（"helpText"）;
}）.focus（switchText）.blur（switchText）;

$（"form"）.submit（function（） {
$（this）.find（"input[type=text][title！=""]"）.each（function（） {
if （$（this）.val（） == $（this）.attr（"title"）） $（this）.val（""）;
}）;
}）;

2. 参考文章
http://webservices.blog.gustavus.edu/2008/06/23/text-input-example-text-with-jquery/