如何在单个文本框中添加多个联系号码，以及使用javascript添加的每个文本的X(清除)按钮

How to add multiple contact numbers within a single textbox and also a X(clear) button for each of the text added using javascript?

本文关键字：添加 文本 javascript 按钮 清除 单个 号码 联系      更新时间：2023-09-26

如何在单个文本框内添加多个联系号码，以及使用javascript添加的每个文本的X(clear)按钮?

下面是我的HTML页面的一部分

Contact No:<input type="text" id="no"><input type="button" value="ADD" id="add" onclick="javascript:addContact();">
<input type="text"  id="text_name"  style="width: 300px;height:50px;" />
这是我的javascript函数 
function addContact(){
 var temp = document.createElement("input");
temp.innerHTML="<input type='search' value='' alt='clear' >";
 var contact_added=document.getElementById("text_name").value;
 var contact=document.getElementById("no").value;
 document.getElementById("text_name").value=contact+temp+contact_added;
}

这是我得到的输出

![输出]

然而，我需要的是，对于我输入的每一个文本，它应该后跟一个clear这样我就可以清除选中的文本块

function addContact(){
 temp="<input type='search' value=''.      alt='clear' >"; 
var contact_added=document.getElementById("text_name").value; 
var contact=document.getElementById("no").value;
 document.getElementById("text_name").value=contact+temp+contact_added;
 }

然而这并不能解决你的问题。我认为这不是一个好主意，这样做的输入和按钮。这只会让事情变得复杂。首先创建一个带有隐藏字段的表单:

<form action="submit.php" method="post">
<input name="contacts" id="contacts_hidden" style="display:none">
</form>
<div id="contacts">
</div>
//your submit button and input

现在你可以这样做:

contacts=[];
function addContact(){
         newcontact=document.getElementById("no");    
contacts.push(newcontact.value);
newcontact.value="";   
render();
}
function delete(i){
contacts.splice(i,1);
render();
}
//this takes the contacts array and adds it to the page + hidden submit field
function render(){
    hidden=document.getElementById("contacts_hidden");
all=document.getElementById("contacts");
content="";
for(i=0;i<contacts.length;i++){
//add a delete button
content+=contacts[i]+"<a href='javascript:delete("+i+")'>Delete</a>";
}
all.innerHTML=content;
hidden.value=contacts.join(";");
}
相关文章：