Question

我有一个代码，它几乎完成了。如果在输入框中键入内容和“，”，则会添加标记。

我只需要在输入框中插入/添加这些标记，而不是在输入框之前。

不知何故，我设法在输入框之前在div中插入/添加这些标记。

我应该使用什么代替此代码 div.insertBefore（tag.element，maininput）; 。

这是主要代码

var i;

var tags=[];

var close=document.getElementsByClassName("close");

for(i=0; i<close.length; i++){

close[i].onclick=function(){

this.parentElement.style.display="none";

}

}

var div=document.createElement("DIV");

document.body.appendChild(div);

div.className="tags-input";

var maininput=document.createElement("INPUT");

var hiddeninput=document.createElement("INPUT");

div.appendChild(maininput);

maininput.setAttribute("type", "text");

maininput.setAttribute("class", "main-input");

div.appendChild(hiddeninput);

hiddeninput.setAttribute("type", "hidden");

hiddeninput.setAttribute("class", "tags-input");

maininput.addEventListener("input", function(t){

var enteredTags=maininput.value.split(",");

if(enteredTags.length>1){

maininput.value="";

enteredTags.forEach(function(t){

var filter=filterTag(t);

if(filter.length>0){

addTag(filter);

}

});

}

});

addTag("HTML");

function addTag(text){

var tag={

text: text,

element: document.createElement("SPAN")

};

tag.element.className="tag";

tag.element.textContent=text;

var span2=document.createElement("SPAN");

span2.className="close";

var cl=tag.element.appendChild(span2);

tags.push(tag);

span2.addEventListener("click", function(){

this.parentElement.style.display="none";

removeTag();

});

div.insertBefore(tag.element, maininput);

refreshTag()

}

function removeTag(){

tags.splice(tags.indexOf(tags), 1);

refreshTag()

}

function refreshTag(){

var taglist=[];

tags.forEach(function(t){

taglist.push(t.text);

});

hiddeninput.value=taglist.join(",");

}

function filterTag(tag){

return tag.replace(/[^\w -]/g, "").trim().replace(/\W+/g, "-");

}

.tag{
     padding:4px;
	 padding-left:10px;
	 padding-right:20px;
	 background:#ddd;
	 color:black;
	 margin-right:10px;
	 user-select:none;
	}
	
.tag:hover{
           background:#2196f3;
		   color:white; 
		  }
	  
.close::after{
	         content:"x";
	         position:absolute;
	         padding:3.5px;
			 margin-top:-4px;
	         cursor:pointer;
			 user-select:none;
			 margin-left:2px;
	         }
	 
.close:hover::after{
		           color:gray; 
		           }

<!DOCTYPE html>

<html>

<body>

</body>

</html>

如何将标签插入输入框

0 个答案: