模仿CSDN通过点击来选择标签

最新推荐文章于 2023-06-11 17:47:44 发布

藏红

最新推荐文章于 2023-06-11 17:47:44 发布

阅读量636

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/ch717828/article/details/43116329

版权

css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<body>
	<input type="text" id="txtTag2" style="width: 576px; height: 20px; padding-left: 2px;" maxlength="100">
	<div id="tag2box" style="">
		<table>
			<tbody><tr><th>备用语句</th></tr>

			<td id="td_tag21">
				<a οnclick="javascript:setTag2(this);return false;" class="">执行《干部任用条例》、条件和程序不严格</a>
				<a οnclick="javascript:setTag2(this);return false;" class="">任人唯亲</a>
				<a οnclick="javascript:setTag2(this);return false;" class="">领导干部用人上个人说了算</a>
				<a οnclick="javascript:setTag2(this);return false;" class="">跑官要官、说情打招呼</a>
				<a οnclick="javascript:setTag2(this);return false;" class="">买官卖官</a>
				<a οnclick="javascript:setTag2(this);return false;" class="">不存在突出问题</a>
				
			</td>
			</tbody>
		</table>
	</div>
</body>

<style type="text/css" media="screen">
		#tag2box{
			width: 561px;
			border: solid 1px #ffcccc;
			border-radius: 4px;
			padding: 10px;
			margin-top: 1px;
		}
		td{
			font-size: 12px;
			font-family: Verdana, "Lucida Grande", Arial, Helvetica, sans-serif;
		}
		#tag2box a{
			float: left;
			display: block;
			cursor: pointer;
			border: solid 1px #ccc;
			border-radius: 5px;
			padding: 4px 6px;
			margin: 0 10px 10px 0;
		}
		#tag2box a.act{
			background-color: #ffffcc;
		}
	</style>

<script type="text/javascript">
		function setTag2(v)
		{
			// console.log(v.innerHTML);
			var html = v.innerHTML;
			if(v.className=="")
			{
				v.className +=" "+"act";
				//在输入框中添加 html
				addText(html);
			}
			else
			{
				v.className ="";
				//在输入框中删除html
				removeText(html);
			}
		}
		// 在输入框中添加 text
		function addText(text)
		{
			var inp =document.getElementById("txtTag2");
			var oldtext = trim(inp.value);
			var division = ",";
			//如果是第一个文本，不使用分隔符
			if(oldtext=="")
				division="";
			var newtext = oldtext+division+text;
			inp.value=newtext;
		}
		//在输入框中去除掉 searchText
		function removeText(searchText)
		{
			 var inp =document.getElementById("txtTag2");
			 var html= inp.value;
			 console.log()			
			 var regExp = new RegExp(","+searchText, 'g');
			 var newhtml = html.replace(regExp,"");
			 regExp =  new RegExp(searchText, 'g');
			 var newhtml = newhtml.replace(regExp,"");
			 inp.value=newhtml;
		}

		// 去除掉text的空格
		function trim(text)
		{
			return text.replace(/[ ]/g,"");
		}
	</script>