基于jQuery的输入框无值自动显示指定数据的实现代码 - Web前端

【解决方案】

　　1. 准备工作

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

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

（3）转换方法
复制代码 代码如下:
functionswitchText()
{
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/if ($ != JQuery) {$ = jQuery.noConflict();}var isLogined = false;var cb_blogId = 77920;var cb_entryId = 1941349;var cb_blogAPP = "xhzi";var cb_blogUserGUId = "669048cb-f4e2-df11-ac81-842b2b196315";var cb_entryCreateddate = '2011/1/21 16:22:00';

标签：输入框代码数据WebjQuery