您的位置:首页 > Web前端 > JQuery

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

2011-01-24 00:00 1016 查看
【解决方案】

  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/

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';
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: