回车添加删除标签

最新推荐文章于 2022-11-22 21:36:15 发布

原创最新推荐文章于 2022-11-22 21:36:15 发布 · 425 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #css #html5 #css3 #es6

JavaScript 同时被 3 个专栏收录

30 篇文章

订阅专栏

17 篇文章

订阅专栏

dom

8 篇文章

订阅专栏

本文介绍了一款简单的JavaScript插件，用于实现标签的创建、删除及获取功能。通过该插件，用户可以在网页上轻松地添加和管理标签，并且支持通过回车键快速创建新标签。

今天借用几分钟，写了一个回车添加标签、删除标签、标签获取的js，大家可以随意使用啊！！！

html：

	<div id="">
		<div id="tagsContainer">
			<input type="text" id="tagIn" size="8" maxlength="15" placeholder="输入标签回车"/>
		</div>
	</div>

css:

<style type="text/css">
		*{
			margin: 0px;
			padding: 0px;
			box-sizing: border-box;
		}
		#tagsContainer{
			display: flex;
			width: 800px;
			height: 34px;
			border: 1px solid crimson;
			border-radius: 5px;
			margin: 16px;
			align-items: center;
		}
		.tags{
			background-color: #DC143C;
			color: white;
			font-size: 16px;
			padding: 0px 10px;
			display: block;
			height: 22px;
			margin-left: 8px;
			border-radius: 5px;
			cursor: pointer;
		}
		.tags:hover .remove-tag::before{			
			content: "X";
		}
		.remove-tag::before{
			padding: 0px 5px;
			width: 14px;
			height: 14px;
			font-size: 13px;
			margin-left: 3px;
			background-color: #dc545d;
			border-radius: 100%;
			cursor: pointer;
		}
		#tagIn{
			outline: none;
			border: none;
			padding: 0px 8px;
			margin-left: 5px;
			background: transparent;
			color: #4a4a4a;
		}
	</style>

js:

(function(){
	// 移除标签
	function tagFC(){
		var removeHandle=document.querySelectorAll(".remove-tag");
		removeHandle.forEach((ele)=>{
			ele.addEventListener("click",()=>{
				ele.parentElement.remove();
			})
		})
	}	
	// 回车创建标签
	var tagIn=document.querySelector("#tagIn");
	var tagsContainer=document.querySelector("#tagsContainer");
	document.onkeypress=function enterDoLongin(){
		if(tagIn.value){
			if(event.keyCode==13){
				var newTag=document.createElement("span");
				newTag.className="tags";
				newTag.innerHTML=`${tagIn.value}<span class="remove-tag"></span>`;
				// 把标签添加进去
				tagsContainer.insertBefore(newTag,tagIn);
				tagIn.value="";
				tagFC();
				getTags();
				}
		}
	}
	// 收集标签
	var tags=[];
	function getTags(){
		var removeHandle=document.querySelectorAll(".tags");
		tags=[];
		removeHandle.forEach((ele)=>{
			tags.push(ele.innerText);
		});
		console.log(tags);
	}
}).call()