经验分享程序开发文档资料数据资源其它资源

jquery标签回车自动完成js代码

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery标签回车自动完成js代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图:

jquery标签回车自动完成js代码

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>jquery��ǩ�س��Զ����</title>
    <link href="css/style.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="js/tabControl.js"></script>
    <style type="text/css">
        #tag {
            width: 700px;
            height: 30px;
            text-align: left;
            padding: 10px;
            border: 2px #E0E0E0 inset;
            line-height: 25px;
        }
        /*input post tab*/
        div.radius_shadow {
            border: 1px solid #DBDBDB;
            -moz-border-radius: 5px;
            -khtml-border-radius: 5px;
            -webkit-border-radius: 5px;
            border-radius: 5px;
            padding: 5px;
            -webkit-box-shadow: 0 0 10px #414141;
            -moz-box-shadow: 0 0 10px #414141;
            box-shadow: 0 0 10px #414141;
            font-size: 12px;
            background: #fff;
        }

        span#radius {
            display: inline-block;
            float: none;
            font-size: 12px;
            padding: 2px 5px;
            margin: -2px 5px 15px;
            border: 1px solid #E0E0E0;
            background-color: #F0F0F0;
            -moz-border-radius: 5px;
            -khtml-border-radius: 5px;
            -webkit-border-radius: 5px;
            border-radius: 5px;
            color: #000;
        }

        .tabinput {
            margin-left: 5px;
            border: 0;
        }

        a#deltab {
            cursor: pointer;
            display: inline-block;
            color: #808080;
            margin-left: 5px;
            font-weight: bold;
        }

        a#deltab:hover {
            color: #D2D2D2;
            text-decoration: none;
        }

        #getTab {
            margin-top: 10px;
            border: 1px solid #E0E0E0;
            background-color: #F0F0F0;
            padding: 10px;
            cursor: pointer;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            $("#tag").tabControl({ maxTabCount: 5, tabW: 80 }, "����,jquery��Ч,jquery����,");
            $("#getTab").click(function () {
                var v = $("#tag").getTabVals();
                alert(v.join(","));
            });
        });
    </script>
</head>
<body style="background:#fff;">
    <br /><br /><br /><br /><br />
    <center>
        <div id="tag"></div>
        <input id='getTab' type="button" value=" �� �� " />
    </center>
</body>
</html>

JS代码(tabControl.js):

 /***��ǩ�ؼ� *���ܣ���Enter��Tab��ʧȥ����ȷ����ǩ������ϣ�˫�����ֿ��Ա༭�ñ�ǩ��������棨������ʾɾ���ñ�ǩ *tabControl:function *����˵���� *initTabCount:int һ��ʼ��ʼ����ǩ������������ *maxTabCount:int �����ɽ������ı�ǩ������ *tabMaxLen:int ÿ����ǩ������������ַ����ȣ� *tabW:int ��ǩ�����Ŀ�ȣ� *tabH:int ��ǩ�����ĸ߶ȣ� *tipTOffset:int ��ʾ��Ϣ���ǩ������topƫ������ *tipLOffset:int ��ʾ��Ϣ���ǩ������leftƫ������ *tags:string ��ʼ���ı�ǩ���ݣ��Զ���Ϊ���� **/
$.fn.extend({
	tabControl:function(options,tags){
	var defOpt ={
	initTabCount:1,maxTabCount:10,tabMaxLen:10,tabW:150,tabH:15,tipTOffset:5,tipLOffset:0}
;
	var opts = $.extend(defOpt,options);
	var _tags = [];
	if (tags){
	tags = tags.replace(/[^A-Za-z0-9_,\u4E00-\u9FA5]+/gi,"").replace(/^,+|,+$/gi,"");
	//������Ӣ�ġ����֡��»�˿�����ŵ������ַ���ȥ����Ҳ����Զ��ſ�ͷ�����_tags = tags.split(',');
}
_tags = _tags.length > opts.maxTabCount ? _tags.slice(0,opts.maxTabCount - 1):_tags;
	opts.initTabCount = opts.maxTabCount <= _tags.length ? _tags.length:_tags.length + (opts.maxTabCount - _tags.length > opts.initTabCount ? opts.initTabCount:opts.maxTabCount - _tags.length);
	var checkReg = /[^A-Za-z0-9_\u4E00-\u9FA5]+/gi;
	//ƥ��Ƿ��ַ�var initTab = function(obj,index){
	//��ʼ����ǩ����var textHtml = "<input class='tabinput' name='tabinput' style='width:" + opts.tabW + "px;
	height:" + opts.tabH + "px;
	' type='text'/>";
	obj.append(textHtml);
	if (_tags[index]){
	var __inputobj = $("input[type='text'][name='tabinput']",obj).eq(index);
	__inputobj.val(_tags[index].substr(0,opts.tabMaxLen)).css("display","none");
	compTab(obj,__inputobj,_tags[index].substr(0,opts.tabMaxLen));
}
$("input[type='text'][name='tabinput']:last",obj).bind("keydown blur click",function(event){
	if (event.type == "click"){
	//����¼������������յ�һ���¼�����(event)������ͨ��������ֹ���������Ĭ�ϵ���Ϊ���������ȡ��Ĭ�ϵ���Ϊ��event.preventDefault()����������ֹ�¼����ݡ�event.stopPropagation()��������¼�����������뷵��false��return false;
}
if (event.keyCode == 13 || event.keyCode == 9 || event.type == "blur"){
	event.preventDefault();
	//��Ҫ�Ǟ���tab�I����Ҫ׌��ǰԪ��ʧȥ���c������ֹ���������Ĭ�ϵ���Ϊ��event.stopPropagation();
	var inputObj = $(this);
	var value = $(this).val().replace(/\s+/gi,"");
	if ((event.keyCode == 13 || event.keyCode == 9) && value != "")//��Ҫ��̎��IE inputObj.data("isIEKeyDown",true);
	if (event.type == "blur" && inputObj.data("isIEKeyDown")){
	inputObj.removeData("isIEKeyDown");
	return;
}
if (value != ""){
	if (value.length > opts.tabMaxLen){
	showMes($(this),"������1��" + opts.tabMaxLen + "���ַ����ȵı�ǩ");
	return;
}
var _match = value.match(checkReg);
	if (!_match){
	compTab(obj,inputObj,value);
	if ($("input[type='text'][name='tabinput']",obj).length < opts.maxTabCount){
	if (!inputObj.data("isModify")) initTab(obj);
	else if (!$("input[type='text'][name='tabinput']",obj).is(":hidden")){
	initTab(obj);
}
}
$("input[type='text']:last",obj).focus();
	hideErr();
}
else{
	showMes(inputObj,"���ݲ��ܰ����Ƿ��ַ���{
	0}
����".replace("{
	0}
",_match.join(" ")));
}
}
else{
	if (event.type != "blur") showMes(inputObj,"���ݲ����");
}
}
}
).bind("focus",function(){
	hideErr();
}
);
}
//��ɱ�ǩ��дvar compTab = function(obj,inputObj,value){
	inputObj.next("span").remove();
	//ɾ�����inputԪ�����spanvar _span = "<span name='tab' id='radius'><b>" + value + "</b><a id='deltab'>��</a></span>";
	inputObj.after(_span).hide();
	inputObj.next("span").find("a").click(function(){
	if (confirm("ȷ��ɾ���ñ�ǩ��")){
	inputObj.next("span").remove();
	inputObj.remove();
	if ($("span[name='tab']",obj).length == opts.maxTabCount - 1) initTab(obj);
}
}
);
	inputObj.next("span").dblclick(function(){
	inputObj.data("isModify",true).next("span").remove();
	inputObj.show().focus();
}
);
}
return this.each(function(){
	var jqObj = $(this);
	for (var i = 0;
	i < opts.initTabCount;
	i++){
	initTab(jqObj,i);
}
jqObj.data("isInit",true);
	jqObj.click(function(){
	$("input[type='text'][name='tabinput']",jqObj).each(function(){
	if ($(this).val() == ""){
	$(this).focus();
	return false;
}
}
);
}
);
}
);
	function showMes(inputObj,mes){
	var _offset = inputObj.offset();
	var _mesHtml = "<div id='errormes' class='radius_shadow' style='position:absolute;
	left:" + (_offset.left + opts.tipLOffset) + "px;
	top:" + (_offset.top + opts.tabH + opts.tipTOffset) + "px;
	'>" + mes + "</div>";
	$("#errormes").remove();
	$("body").append(_mesHtml);
}
function hideErr(){
	$("#errormes").hide();
}
function showErr(){
	$("#errormes").show();
}
}
,getTabVals:function(){
	//��ȡ��ǰ���������ɵ�tabֵ�������һά����var obj = $(this);
	var values = [];
	obj.children("span[name=\"tab\"][id^=\"radius\"]").find("b").text(function(index,text){
	var checkReg = /[^A-Za-z0-9_\u4E00-\u9FA5]+/gi;
	values.push(text.replace(checkReg,""));
}
);
	return values;
}
}
);

CSS代码(style.css):

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,br,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0}
body{font-family:verdana,tahoma,helvetica,arial,sans-serif;font-size:13px;margin:15px;background-color:#F8F8F8;color:#676767;}
a{text-decoration:none;outline:none;color:#666666;}
a:hover{text-decoration:none}
img{border:0}
ul{list-style:none;margin:0;padding:0}
h2{color:#6CBD45;font-size:14px;font-weight:bold;padding-bottom:0.5em;margin:0;}
h3{font-size:13px;font-weight:bold;}
p{margin:0;padding:0;}
.clear{height:0;overflow:hidden;clear:both;font-size:0;}
#meun{color:#fff;padding-left:10px;}
#meun img{float:left;}
#submeun{margin-left:70px;float:left;}
#submeun li{text-align:center;margin-right:10px;float:left;display:inline;}
#submeun li a{color:#fff;height:50px;line-height:50px;font-size:14px;font-weight:bold;text-align:center;padding-left:15px;padding-right:15px;display:block;}
#submeun li.cur{text-align:center;background:#82ce18;margin-right:10px;float:left;display:inline;}
#top{background-color:#000;margin:0em 0 10px 0em;border-style:solid;border-width:1px;border-color:#E5E5E5;height:50px;line-height:50px;}
h2.subtitle{font-size:13px;float:right;color:#6CBD45;margin:0 10px;text-align:right;}
h1.title{height:50px;font-size:12px;background:url(logo.png) no-repeat;}
h1.title a:link,h1.title a:visited,h1.title a:hover{color:#000;text-decoration:none;}
#main{background-color:#FFFFFF;margin:0em 295px 15px 0em;padding:20px;border-style:solid;border-width:1px;border-color:#E5E5E5;}
#navbar{width:250px;float:right;clear:right;background-color:#FFFFFF;padding:15px;border-style:solid;border-width:1px;border-color:#E5E5E5;margin-bottom:15px;}
.lab_item2{position:relative;z-index:1;height:50px;line-height:50px;}
.lab_lst2{padding:0 30px;overflow:hidden;}
.lab_item2{border-bottom:1px dashed #D1D1D1;padding:0 20px;margin-bottom:5px;}
.lab_item2 a{float:left;}
.lab_item2 span{float:right;}
.lab_item{position:relative;z-index:1;min-height:140px;_height:140px}
.lab_item_pic{position:absolute;top:0}
.lab_item_head{font-size:14px;font-weight:bold}
.lab_item_stats{color:#ADADAD}
.lab_item_opt{position:absolute}
.lab_item_opt .gb_foed{margin-right:15px}
.lab_lst{padding:30px;overflow:hidden;}
.lab_lst .lab_item{border-bottom:1px dashed #D1D1D1;padding:0 20px 30px 240px;margin-bottom:30px}
.lab_lst .lab_item_last{border-bottom:0;margin-bottom:0}
.lab_lst .lab_item_pic{left:20px}
.lab_lst .lab_item_pic img{}
.lab_lst .lab_item_opt{left:240px;bottom:36px}
.lab_front{background:#F8F8F8 url(../images/lab_front.png) no-repeat center top;border-bottom:1px solid #DFDFDF}
.lab_front .lab_item{min-height:260px;_height:260px;padding:0 0 0 470px}
.lab_front .lab_item_pic{left:0}
.lab_item_desc{margin-bottom:15px;line-height:25px;letter-spacing:2px;}
.lab_front .lab_item_opt{position:static}
.lab_front .lab_pic_lst{margin-top:15px}
.lab_front .lab_pic_lst li{float:left;background:#EBEBEB;width:110px;height:110px;margin-right:30px;_display:inline}
.lab_front .lab_pic_lst li.last{margin-right:0}
.gb_btn .t,.gb_foed .t{width:auto;_width:0;*overflow:visible;margin:0;padding:0;font-size:12px;line-height:1.333;*line-height:17px;border:0;white-space:nowrap;background:none}
.gb_btn span.t{_margin-top:-1px}
.nav_box{margin-bottom:20px;}
.nav_box h3{color:#666666;}
#navbar h3{margin-bottom:10px;}
#navbar a:link,#navbar a:visited{position:relative;line-height:2em;color:#676767;}
#navbar a:hover{color:#DC8E38;text-decoration:none}
#navbar li a.rss{float:right;display:block;}
#navbar p{line-height:1.6em;text-align:justify;text-justify:inter-ideograph;}
.nav_box h3{padding-bottom:0.5em;border-bottom-style:solid;border-bottom-width:2px;border-bottom-color:#666666;margin:0.3em 0}
.artical_text li{list-style:url(li.gif);margin-left:18px;}
.artical_text a{color:#666666;}
.list_tag{font-size:1.1em}
.artical_text h1{font-size:18px;margin:0 0 5px 0;}
.artical_text h1 a:link,.artical_text h1 a:visited,.artical_text h1 a:hover{color:#666666;text-decoration:none;}
.artical_text .long_text{line-height:1.8em;text-align:justify;text-justify:inter-ideograph;font-size:13px;}
.artical_text .long_text p{margin:10px 0;}
.artical_text img{border:0;}
.artical_text .tag_list{padding:10px 0}
.artical_text .descr{border:1px dashed #F0F0F0;border-left:6px solid #666;color:#555;display:block;margin:12px 0;padding:8px 10px;line-height:1.8em;background-color:#FDFEF1}
.artical_text .pl{border:1px dashed #666;color:#555;display:block;margin:12px 0;padding:8px 10px;line-height:1.8em;background-color:#fff;}
.pl h1{font-size:14px;font-weight:bold;color:#666666;border-bottom:1px #666666 dashed;}
.pltext{border:1px dashed #666;width:98.4%;height:100px;color:#555;display:block;margin:12px 0 0 0;padding:8px 10px;line-height:1.8em;background-color:#F8F8F8;}
.pltext2{border:1px dashed #666;width:98.4%;height:300px;color:#555;display:block;margin:12px 0 0 0;padding:8px 10px;line-height:1.8em;background-color:#F8F8F8;}
.pltext3{border:1px dashed #666;width:98.4%;height:15px;color:#555;display:block;margin:12px 0 0 0;padding:8px 10px;line-height:1.8em;background-color:#F8F8F8;}
.pltext4{border:1px dashed #666;width:99.8%;height:30px;color:#555;display:block;margin:12px 0 0 0;cursor:pointer;line-height:1.8em;background-color:#F8F8F8;}
.pltext5{border:1px dashed #666;width:98.4%;height:500px;color:#555;display:block;margin:12px 0 0 0;padding:8px 10px;line-height:1.8em;background-color:#F8F8F8;}
.txnr{font-size:14px;font-weight:bold;color:#0066FF;}
.copyright{text-align:center;}
.text{border:1px dashed #666;height:23px;color:#555;padding:2px;line-height:1.8em;background-color:#F8F8F8;}
.w50{width:50px;}
.btn{border:1px solid #666;font-size:14px;font-weight:bold;color:#555;padding:10px 15px;cursor:pointer;margin-right:15px;margin-left:20px;}
#totop{position:fixed;bottom:40px;right:10px;z-index:999;width:71px;cursor:pointer;display:none;}
*html #totop{position:absolute;cursor:pointer;right:10px;display:none;top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight)-112+"px")}
#totop a{display:block;width:71px;height:24px;padding-top:48px;background:url(../images/toTop.gif) no-repeat;text-align:center;color:#888}
#totop a.cur{background-position:-88px 0;text-decoration:none;color:#3a9}
#tips_info{height:50px;line-height:50px;text-align:center;color:red;background:#fff;border:solid 1px #ccc;display:none;bottom:0px;}
.msgbox_layer,.msgbox_layer .gtl_ico_succ,.msgbox_layer .gtl_ico_fail,.msgbox_layer .gtl_ico_hits,.msgbox_layer .gtl_ico_clear,.msgbox_layer .gtl_end{background-image:url("../images/gb_tip_layer.png");background-repeat:no-repeat;color:#606060;display:inline-block;font-size:14px;font-weight:bold;height:54px;line-height:54px;}
.msgbox_layer_wrap{left:0;position:fixed;_position:absolute;_top:expression(documentElement.clientHeight/2 + documentElement.scrollTop + "px");text-align:center;top:46%;width:100%;z-index:65533;}
.msgbox_layer{background-position:0 -161px;background-repeat:repeat-x;margin:0 auto;padding:0 18px 0 9px;position:relative;}
.msgbox_layer .gtl_ico_succ{background-position:-6px 0;left:-45px;position:absolute;top:0;width:45px;}
.msgbox_layer .gtl_end{background-position:0 0;position:absolute;right:-6px;top:0;width:6px;}
.msgbox_layer .gtl_ico_fail{background-position:-6px -108px;left:-45px;position:absolute;top:0;width:45px;}
.msgbox_layer .gtl_ico_hits{background-position:-6px -54px;left:-45px;position:absolute;top:0;width:45px;}
.msgbox_layer .gtl_ico_clear{background-position:-6px 0;left:-5px;position:absolute;top:0;width:5px;}
.msgbox_layer img{float:left;margin:19px 10px 0 5px;}
#faces{position:absolute;width:940px;height:210px;margin:10px;line-height:25px;border:1px #cccccc solid;background:#ffffff;display:none;z-index:900;}
#faces img{border:1px #cccccc dashed;margin:5px;cursor:pointer;}
#bq{margin-bottom:-10px;text-align:left;font-weight:bold;letter-spacing:2px;cursor:pointer;display:block;width:125px;}
#bq img{margin-bottom:-10px;}
.pages{color:#999;font-weight:bold;}
.pages a,.pages .cpb{text-decoration:none;float:left;padding:5px 10px 5px 10px;border:1px solid #ddd;background:#ffff;margin:0 2px;font-size:11px;color:#000;display:block;cursor:pointer;}
.pages a:hover{background-color:#E61636;color:#fff;border:1px solid #E61636;text-decoration:none;}
.pages .cpb{font-weight:bold;color:#fff;background:#E61636;border:1px solid #E61636;}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
37.47 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
37.47 KB
立即下载
路瑶芝蓓
了解
打赏作者 鼓励作者
jquery特效5
最新结算
HTM5 Canvas实现3D飞机飞行动画特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
HTM5 Canvas实现3D飞机飞行动画特效代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery图像缩放工具插件Zoomer特效代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery图像缩放工具插件Zoomer特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
Labelauty–jQuery单选框_复选框美化插件特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
Labelauty–jQuery单选框_复选框美化插件特效代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery网页版打砖块小游戏源码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery网页版打砖块小游戏源码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章