onKeyUp Texftield Auto Generate。 HTML / JAVA

Question

我有一个代码，使用户能够在第一个TextBox中输入一个值，我希望它在具有相同ID的其他TextFields中填充相同的值。 （列中有9个具有相同ID的文本字段）

这是我的代码，但问题是只在第一个收件箱中填充值（TextF1），其他8没有任何反应。有人在这里看到问题

<form >
<input type='text' id='VarField' onKeyUp="document.getElementById('VarField1').value=this.value"  value='' size="10">

<input type='text' name='TextF1' id='VarField1' value='' size="10">
<input type='text' name='TextF2' id='VarField1' value='' size="10">
<input type='text' name='TextF3' id='VarField1' value='' size="10">
.
.
.
<input type='text' name='TextF8' id='VarField1' value='' size="10">
<input type='text' name='TextF9' id='VarField1' value='' size="10">
</form>

Answer 1

拥有多个具有相同ID的标记是不好的做法 - 因此，getElementById方法只访问具有该ID的第一个标记。相反，为每个输入提供相同的类，选择所有类，并迭代它们。

所以你的代码看起来像这样（我将函数与onKeyUp事件分开，以便更容易看到）：

<script type="text/javascript">
    function writeText()
    {
        var textFields = document.getElementsByClassName("VarField1");
        for(i = 0; i < textFields.length; i++)
        {
            textFields[i].value = document.getElementById("VarField").value;
        }
    }
</script>

<form >
    <input type='text' id='VarField' onKeyUp="writeText()"  value='' size="10">

    <input type='text' name='TextF1' class='VarField1' value='' size="10">
    <input type='text' name='TextF2' class='VarField1' value='' size="10">
    <input type='text' name='TextF3' class='VarField1' value='' size="10">
    <input type='text' name='TextF8' class='VarField1' value='' size="10">
    <input type='text' name='TextF9' class='VarField1' value='' size="10">
</form>

请注意，您必须以这种方式迭代 - 尽管使用foreach（for ... in）循环很有吸引力，但这对于getElementsByClassName返回的NodeList不起作用。

Answer 2

HTML Elements的ID应该是唯一的。我的意思是只有一个元素应该具有ID VarField1。

您可以尝试为每个元素提供相同的VarField1类。然后你可以使用for-each循环为每个元素赋予适当的值。这看起来像这样：

function assignValue( textValue )
{
    for ( textBox in document.getElementsByClassName("VarField1") )
    {
        textBox.value = textValue;
    }
}

onKeyUp属性只会使用文本框的值调用assignAble（）函数。

onKeyUp="assignValue(this.value)"

Answer 3

我认为，问题在于，在具有相同ID的页面上不能有多个控件/元素。尝试给他们不同的ID（例如Varfield2，Varfield2等）。那应该可以解决问题。