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

Question

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

<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个文本框并且还在这些文本框中写了一些内容，并且用户再次单击“添加文本框”按钮，则用户将数据插入到文本框中消失。

Answer 1

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

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

Answer 2

而不是设置container.innerHTML，因为您之前已经引用了jQuery，请执行以下操作：

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

Answer 3

您可以使用jQuery.append而不是使用innerHTML

在这里检查小提琴

Answer 4

使用jQuery更容易解决问题

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

Answer 5

更改您的按钮名称，如下所示：

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

代替

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

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

问题描述

5 个解决方案

解决方案1
3 已采纳 2012-05-04 06:09:47

解决方案2
0 2012-05-04 06:10:45

解决方案3
0 2012-05-04 06:12:22

解决方案4
0 2012-05-04 06:15:47

解决方案5
0

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

问题描述

5 个解决方案

解决方案1 3 已采纳 2012-05-04 06:09:47

解决方案2 0 2012-05-04 06:10:45

解决方案3 0 2012-05-04 06:12:22

解决方案4 0 2012-05-04 06:15:47

解决方案5 0

解决方案1
3 已采纳 2012-05-04 06:09:47

解决方案2
0 2012-05-04 06:10:45

解决方案3
0 2012-05-04 06:12:22

解决方案4
0 2012-05-04 06:15:47

解决方案5
0