简单的jQuery添加删除标签代码,可设置只能输入网址或任意输入文字,添加完成按回车键确认添加。可对已添加的标签进行删除操作。
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>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791