软件开发培训班 >> 编程开发 >> 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/