0

我有一个代码使用户能够在第一个 TextBox 中输入一个值，并且我希望它在具有相同 ID 的其他 TextField 中填充相同的值。（一列中有 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>
4

3 回答 3

1

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

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

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

您的 onKeyUp 属性只会使用文本框的值调用 assignVale() 函数。

onKeyUp="assignValue(this.value)"

于 2012-08-02T17:17:54.633 回答
0

拥有多个具有相同 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) 循环很诱人，但这对于返回的 NodeList 不起作用getElementsByClassName。

于 2012-08-02T17:20:31.863 回答
0

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

于 2012-08-02T17:21:47.947 回答