onKeyUp 文本字段自动生成。 HTML/JAVA答案

【问题标题】：onKeyUp Texftield Auto Generate. HTML/JAVAonKeyUp 文本字段自动生成。 HTML/JAVA
【发布时间】：2012-08-02 16:55:44
【问题描述】：

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

【问题讨论】：

标签： java javascript html textfield

【解决方案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)"

【讨论】：

【解决方案2】：

拥有多个具有相同 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。

【讨论】：

非常非常感谢。解决了问题

【解决方案3】：

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

【讨论】：