如何使用document.createElement（「input」）方法使輸入文本字段動態擴展？

Question

這是我在這個真棒社區的第一個問題。

我使用這個JavaScript代碼來構建一個動態表：

function addRow(tableID) { 

     var table = document.getElementById(tableID); 

     var rowCount = table.rows.length; 
     var row = table.insertRow(rowCount); 

     var cell1 = row.insertCell(0); 
     var element1 = document.createElement("input"); 
     element1.type = "checkbox"; 
     element1.name = "chkbox[]"; 
     cell1.appendChild(element1); 

     var cell2 = row.insertCell(1);   
     var element2 = document.createElement("input"); 
     element2.type = "text"; 
     element2.name = "txtbox[]"; 
     element2.onkeypress = "this.style.width = ((this.value.length + 1) * 8) + 'px'"; 
     cell2.appendChild(element2); 


    } 

而且下面的HTML代碼打印出來：

 <table id="dataTable" style="width: 300px;" border="0"> 
      <tr> 
       <td ><input type="checkbox" name="chk" /></td> 

       <td <input id="txt" type="text" onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';"> </td> 
      </tr> 
     </table> 

我的問題是覺得─我希望我的文字輸入字段動態擴展，但由於使用'document.createElement（「input」）;'在JavaScript中，只有第一個文本輸入字段消費動態休息

Answer 1

您可以定義擴展功能以後重新使用它，就像這樣：

expandTextBox = function (tb) { 
    tb.style.width = ((tb.value.length + 1) * 8) + 'px'; 
} 

而且當你創建元素：

var element2 = document.createElement("input"); 
element2.onkeypress = function() { expandTextBox(element2); }; 

，而在HTML：

<input id="txt" type="text" onkeypress="expandTextBox(this)"> 

見Fiddle

Answer 2

當事件添加到動態在JavaScript創建的元素，你必須定義事件代碼爲function不作爲字符串！ 因此，修改addRow函數將此：

... 
    element2.onkeypress = function(){this.style.width = ((this.value.length+1)*8)+'px'};