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/