使用 Javascript 动态添加的文本框中的文本消失

Disappearing text in dynamically added textboxes with Javascript

本文关键字：文本 消失 Javascript 添加 使用 动态      更新时间：2023-09-26

您可以使用以下代码添加任意数量的文本框，如下所示

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script type="text/javascript">
var i=2;
function AddTextbox(){
container.innerHTML=container.innerHTML+'<input type="text" name="'+ i + '" id="'+ i + '">' + '</br>';
i++;
}
</script>
</head>
<body>
<form action="next.php" method="post" >
<input type="text" name="1" id="1" />
<input type="button" onClick="AddTextbox();" value="add" />
<input type="submit" value="submit" />
<div id="container"></div>
</form>
</body>
</html>

我得到的唯一问题是，如果用户添加了 2 个文本框并在这些文本框中写入了一些内容，并且用户再次单击"添加文本框"按钮，则用户插入文本框的数据将消失。

innerHTML 不会保留用户输入。 您应该将输入创建为新元素并使用 appendChild 将元素附加到容器中，而不是使用 innerHTML。

这将使其他输入元素保持不变，而不是用对 innerHTML 的调用替换它们。

不要设置 container.innerHTML，因为你之前已经引用了 jQuery，所以这样做：

$(container).append('<input type="text" ...etc...

您可以使用 jQuery.append 代替使用 innerHTML。

在这里检查小提琴

使用 jQuery 更轻松地解决问题

$('#container').append('<input type="text"  ');

按如下方式更改按钮名称：

<input type="submit2" onClick="AddTextbox();" value="add" />

而不是 

<input type="button" onClick="AddTextbox();" value="add" />
相关文章：