使用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