Question

我正在尝试设置一个表单，当有人在文本输入中输入值时，另一个文本输入会附加到表单中。这是示例代码。

可行，但文本输入不会保留您输入的值。

<html>
<head>
<title>Addabox</title>
<script type="text/javascript">
var Boxcount=0;
var BaseName = 'roomno';
function AddBox() {
    Boxcount +=1;
    var Fname = BaseName.concat(Boxcount);
    document.getElementById('roomrow').innerHTML += "<input type='text' name="+Fname+" value='' length=4 onchange='AddBox'>";
    }
</script>
</head>
<body>
<h2>Add a room</hr><br>
<table>
<tr><td id='roomrow'><input type='text' name='roomno0' value='' length=4 onchange='AddBox()'></td></tr>
</table>
</body>
</html>

我做错了什么？

Answer 1

如果您要使用HTML，请不要执行.innerHTML += ...。它有几个问题，其中一个是你在这里发现的。

改为使用.insertAdjacentHTML()。

document.getElementById('roomrow').insertAdjacentHTML("beforeend", "<input type='text' name="+Fname+" value='' length=4 onchange='AddBox()'>");

虽然我更喜欢DOM创建/操作方法。

var inp = document.getElementById('roomrow').appendChild(document.createElement("input"));
inp.type='text';
inp.name=Fname; 
inp.value='';
inp.length=4;
inp.onchange=AddBox;

Answer 2

innerHTML仅复制HTML属性，但不复制属性（由DOM定义）。 value属性保存元素的初始值，任何更改都由值property保存。

因此，如果你的HTML有一个初始值，那么它也会被复制。请参阅http://jsfiddle.net/nivas/ucu33/，其中文本字段的初始值为0。

您可以使用DOM操作（请参阅cookie monster的答案）或JQuery。

当我将一个文本元素附加到DOM元素时，其他文本输入会丢失它们的值

2 个答案: