簡單的jQuery添加刪除標簽代碼

來源:http://www.xdpitk.live/js/5068.html 2020-01-13 11:46瀏覽(110) 收藏

簡單的jQuery添加刪除標簽代碼,可設置只能輸入網址或任意輸入文字,添加完成按回車鍵確認添加。可對已添加的標簽進行刪除操作。
簡單的jQuery添加刪除標簽代碼
分類:表單代碼 > 輸入框 難易:初級
查看演示 下載資源: 4 下載資源 下載積分: 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
重庆百变王牌app 31选7开奖结果500 51熊猫棋牌官网下载 宁夏11选5遗漏任五 东北麻将免费游戏大厅 如何看懂股票的k线 北京麻将 四川快乐十二开 云南快乐十分开奖前 腾讯游戏麻将来了 陕西快乐十分百宝app qq麻将 广东11选5定位走势图 掌上棋牌官方网站下 体彩11选五开奖走 幸运pk10快艇 中国小篮球比赛