简单的jQuery添加删除标签代码

来源:https://www.sucaihuo.com/js/5068.html 2020-01-13 11:46浏览(27) 收藏

简单的jQuery添加删除标签代码,可设置只能输入网址或任意输入文字,添加完成按回车键确认添加。可对已添加的标签进行删除操作。
简单的jQuery添加删除标签代码
分类:表单代码 > 输入框 难易:初级
查看演示 下载资源: 1 下载资源 下载积分: 20 积分

js代码

<script src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
var WS = function(opt){

	var regexp = opt.regexp || /\S/,
		el = $(opt.el), 
			list = el.val().split(','),
			holder = $('<span class="words-split"></span>'),
			add = $('<a href="javascript:void(0)" class="words-split-add">+</a>');

	for (var i = 0; i < list.length; i++) {
		holder.append( $('<a href="javascript:void(0)" class="fm-button">'+list[i]+'<em> </em></a>') );
	}

	el.hide().after( holder );
	holder.after(add);

	holder.on('click','a>em',function(){	//刪除
		$(this).parent().remove();
		el.val( holder.text().match(/\S+/g).join(',') )
	});
	
	add.on('click',function(){				//添加预处理
		$(this).hide();
		holder.append( $('<span class="lbl-input" contenteditable="true"/>') )
	});
	
	holder.on('blur','.lbl-input',function(){	//验证添加字段
		var t = $(this),v = t.text();
		if( regexp.test(v) ){
			t.remove();
			add.show();
			holder.append( $('<a href="javascript:void(0)" class="fm-button">'+v+'<em> </em></a>') );
			el.val( holder.text().match(/\S+/g).join(',') )
		}else if(!v){
			t.remove();
			add.show();
		}else{
			alert('输入不合法');
		}
	});
	
	holder.on('keydown','.lbl-input',function(e){
		switch(e.keyCode){
			case 13:
			case 27: $(this).trigger('blur');
		}
	});

}

WS({el:'#staticPath',regexp:/\w+\.\w+/});
WS({el:'#staticPath2'});
</script>
标签: 标签添加删除
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 3007547952

1 2