2012-08-02 58 views
0

我有一個代碼,它使用戶能夠在第一個文本框中輸入一個值,並且我希望它在具有相同ID的其他TextFields中填充相同的值。 (有一個列中有9個文本區域具有相同的ID)onKeyUp Texftield自動生成。 HTML/JAVA

這是我的代碼,但問題是值只在第一個收件箱(TextF1)中填充並且其他任何事情都沒有發生。有沒有人看到問題在這裏

<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> 

回答

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)循環,這對於getElementsByClassName返回的NodeList不起作用。

+0

非常非常感謝。解決了這個問題 – 2012-08-03 00:17:03

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)"

0

我相信這個問題是,您不能在具有相同ID的頁面上擁有多個控件/元素。嘗試給他們不同的ID(例如Varfield2,Varfield2等)。這應該可以解決問題。