0

ユーザーが最初の TextBox に値を入力できるようにするコードがあり、同じ ID を持つ他の TextField に同じ値を入力したかったのです。(列には同じ ID を持つ 9 つのテキストフィールドがあります)

ここに私のコードがありますが、問題は値が最初の受信ボックス (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 は一意である必要があります。つまり、1 つの要素だけが 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 に答える