dynamicTags(动态标签)

程序代码园发文地址：dynamicTags(动态标签)-程序代码园小说,Java,HTML,Java小工具,程序代码园,http://www.byqws.com/ ,dynamicTags(动态标签)http://www.byqws.com/blog/2138.html?source=csdn

1、模仿CSDN上传资料中需要填的标签。
2、根据 bootstrap-5.2.3 写的一个dynamicTags(动态标签)生成的小工具

项目文件结构如下：

一、index_dynamicTags.html核心代码，分3块

• 1、动态标签生成
• 2、获取所有标签值
• 3、根据结果展示标签

        <main class="container" style="margin-top: 50px;">
  		<div class='text-center'>
  			<label class="form-label ">动态标签</label>
  		</div>
		<div>
			<div class="mb-3">
				<label class="form-label row " style="float:left ;padding:8px 24px 0 0;">标签</label>
				<div id="dynamicTags_id" class="dynamicTags row" >
					<input id="addTag" class='btn btn-outline-dark col-md-2' type = 'button' value = '+添加标签'></input>
					<label class="form-label col-md-4" style="padding:8px 0 0 30px;">按回车 Enter 创建标签</label>
				</div>
			</div>
		</div>
		<hr class="featurette-divider">
		<div class='text-center'>
  			<label class="form-label ">获取标签</label>
  		</div>
		<input id="getTags" class='btn btn-outline-dark col-md-2' type = 'button' value = '获取所有标签'></input>
		<div id="getTagsText"></div>
		<hr class="featurette-divider">
		<div class='text-center'>
  			<label class="form-label ">加载标签</label>
  		</div>
  		
		<div id="loadTags"></div>
		
	</main>

二、Tag 标签封装，bootstrap-tag-byqws-2.0.js

function Tag(options){
	var opt = {//参数保存在此对象中
		opts: options
    };
	var obj = {
		
		init: function () {//初始化
			var tag_ = $("<span>");
			tag_.addClass('byqws_tag');
			tag_.text(opt.opts.text);
			var tag_close_ = $("<button>");
			tag_close_.addClass('byqws_tag_close btn-close');
			tag_.append(tag_close_);
			
			tag_close_.on('click', function(){
				tag_.remove();
			});
			
			return tag_;
		}	
	};
	return obj.init();
	
}

三、动态生成标签，获取所有标签值，根据结果展示标签，dynamicTags-1.0.js

window.onload=function(){
		
	var tag_input_ = "<input id='tag_input' class='form-control' type='text' placeholder=''></input>";

	$('#addTag').on('click', function(){
		$('#addTag').attr('style', 'display: none;');
		
		var a = $("<div class='row col-md-2'>"+tag_input_+"</div>");
		$('#addTag').after(a);
		$('#tag_input').focus();

		$("#tag_input").blur(function() {
		    // 在这里编写失去焦点事件的处理逻辑
			$('#addTag').removeAttr('style');
        	$('#tag_input').parent().remove();
		});
		
		$("#tag_input").keydown(function(e){
			// 按回车键生成标签
	        if(e.keyCode == 13) {
	        	var tag = new Tag({
	        		text:$("#tag_input").val()
	        		
	        	});
	        	
	        	$('#addTag').before(tag);
	        	$('#addTag').removeAttr('style');
	        	$('#tag_input').parent().remove();
	        	
	        }
	    });
	});
	
	$('#getTags').on('click', function(){
		var tags = [];
		
		$('.byqws_tag').each(function() {
			tags.push($(this).text());
		});
		$('#getTagsText').append(tags);
		console.log(tags);
	});
	
	var tags_ = ['java','html']
	
	for(var i = 0 ; i<tags_.length;i++){
		console.log(tags_[i]);
		var tag = new Tag({
    		text:tags_[i]
    		
    	});
		$('#loadTags').append(tag);
	}
	
//	
}

结果展示

项目下载地址：dynamicTags(动态标签)

程序代码园发文地址：dynamicTags(动态标签)-程序代码园小说,Java,HTML,Java小工具,程序代码园,http://www.byqws.com/ ,dynamicTags(动态标签)http://www.byqws.com/blog/2138.html?source=csdn