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

简单的jQuery添加删除标签代码，可设置只能输入网址或任意输入文字，添加完成按回车键确认添加。可对已添加的标签进行删除操作。

分类：表单代码 > 输入框难易：初级

查看演示下载资源下载积分： 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>