【ife】任务二十一：基础JavaScript练习（四）

最新推荐文章于 2020-09-28 16:40:03 发布

原创最新推荐文章于 2020-09-28 16:40:03 发布 · 467 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#百度前端技术学院 #ife #HTML #JavaScript

本文介绍了一种通过JavaScript实现的文本标签输入和显示的方法。该方法能够处理用户输入的标签，支持空格、逗号及回车键作为分隔符，并能去除重复标签，限制最多显示10个标签。此外，还提供了鼠标悬停和点击事件来修改或删除已显示的标签。

document.getElementById("tag").onkeypress = function(e) {
	var ev = e || window.event;
	var key = ev.keyCode || ev.which || ev.charCode; 
	switch(key) { 
		case 32: 
		case 13: 
		case 44:
		{  
			var input = document.getElementById("tag").value;
			var tabs = input.split(/[\s\n\r,，]/); 
			for (var i = 0; i < tabs.length; i++) {
				if (tabs[i] == "" || typeof(tabs[i]) == "undefined") {
					tabs.splice(i, 1);
					i--;
				}
			}
			var norepeatTabs = norepeat(tabs); 
			if (norepeatTabs.length > 10)
				norepeatTabs.splice(0, norepeatTabs.length - 10);
			show(norepeatTabs);
		}
	}
};
function norepeat(contents) {
	var norepeatContents = [];
	for (var i = 0; i < contents.length; i++) {
		if(norepeatContents.indexOf(contents[i]) == -1)
			norepeatContents.push(contents[i]);
	}
	return norepeatContents;
}
function show(tabs) { 
	var content = "";
	for (var i = 0; i < tabs.length; i++)
		content += "<div class='tags' onmouseover='mouseover(this)' onmouseout='mouseout(this)' onclick='deleteTags(this)'>"+ tabs[i] + "</div>";
	document.getElementById("tags").innerHTML = content;
}
function mouseover(obj) {
	obj.innerHTML = "删除" + obj.innerHTML;
	obj.style.background = "blue";
}
function mouseout(obj) { 
	obj.innerHTML = obj.innerHTML.slice(2);
	obj.style.background = "red";
}
function deleteTags(obj) { 
	document.getElementById("tags").removeChild(obj);
}
function showHobbies() {
	var hobby = document.getElementsByTagName("textarea")[0].value; 
	var hobbies = hobby.split(/[\s\n\r，,、\t]/); 
	for (var i = 0; i < hobbies.length; i++) { 
		if (hobbies[i] == "" || typeof(hobbies[i]) == "undefined") {
			hobbies.splice(i, 1);
			i--;
		}
	}
	var norepeatHobbies = norepeat(hobbies); 
	if (norepeatHobbies.length > 10) 
		norepeatHobbies.splice(0, norepeatHobbies.length - 10);
	var content = "";
	for (var i = 0; i < hobbies.length; i++) 
		content += "<div class='tags''>"+ hobbies[i] + "</div>";
	document.getElementById("hobbies").innerHTML = content;
}