動態創建帶有參數的javascript onkeyup事件的文本框

我擁有的是單個文本框。如果用戶點擊它的最大長度，我想創建一個新的文本框，然後改變焦點，以便他們可以繼續打字。動態創建帶有參數的javascript onkeyup事件的文本框

爲了達到這個目的，我試圖動態地創建一個文本框，其中包含一個onkeyup事件。爲此，我使用document.createElement並創建元素。問題是我無法獲得正確傳遞的參數（當前文本框的ID和要創建的文本框的ID），它們只是變量。在我通過它們之前，我可以測試它們，它們都很好，但是在方法中它們是空的。

這裏是我的代碼：

<script type="text/javascript"> 
    var i = 2; 
    function CreateTextbox() { 
    var box = document.getElementById(divCreateTextbox); 
     var curr = 'txt' + i; 
     var next = 'txt' + (i + 1); 

     var inp = document.createElement('input') 
     inp.type = 'text'; 
     inp.name = 'textfield'; 
     inp.maxlength = '10'; 
     inp.id = curr; 
     inp.setAttribute('onkeyup', 'moveOnMax(inp.id, next)'); 
     inp.onkeyup = function() { moveOnMax(inp.id, next); }; 

     box.appendChild(inp); 
     box.innerHTML += "<br />"; 

     i++; 

     return next; 
    } 

    function moveOnMax(field, nextFieldID) { 
     if (field.value.length >= field.maxLength) { 
      if (document.getElementById(nextFieldID) == null) { 
       var id = CreateTextbox(); 

       if (document.getElementById(id) != null) { 
        document.getElementById(id).focus(); 
       } 
       else 
        alert("problem..."); 
      } 
     } 
    } 
</script> 

    <div id="divCreateTextbox">

我非常新的JavaScript，因此，如果這是完全fubar'd，我道歉。
任何幫助表示讚賞。

來源

2009-12-10 Jaden

<script type="text/javascript"> 
    getId = function(){ 
     var id = 1; 
     return function(){ 
     id++; 
     } 
    }(); 

    function CreateTextbox() { 
     var box = document.getElementById("divCreateTextbox"); 
     var curr = 'txt' + getId(); 
     var inp = document.createElement('input'); 

     inp.type = 'text'; 
     inp.name = 'textfield'; 
     inp.setAttribute("maxlength",'10'); 
     inp.setAttribute("id",curr); 

     box.appendChild(inp); 

     inp.setAttribute('onkeyup','moveOnMax(this)'); 
     box.appendChild(document.createElement("br")); 
     inp.focus(); 
    } 

    function moveOnMax(s){ 
     if(s.value.length >= parseInt(s.getAttribute("maxlength"))-1){ 
     s.blur(); 
     CreateTextbox(); 
     } 
    } 

</script> 


    <div id="divCreateTextbox"></div> 

    <script> 
    window.onload = function(){ 
     CreateTextbox() 
    } 
    </script> 
</html>

來源

2009-12-11 02:57:26 Tim

您遇到的問題與inp的範圍有關。當您使用var關鍵字時，您將其範圍限定爲該塊。

試試這個代碼：

inp.onkeyup = function() { 
    var local_inp_id = inp.id; 
    var local_next = next; 
    return function(){ 
    moveOnMax(inp_id, next); 
    } 
}();

來源

2009-12-10 20:38:18 Tim

感謝您的快速響應，這是極大的讚賞。我明白你的意思是關於範圍，並適當地更改我的代碼，但是...... 我必須在這裏做其他事情錯誤導致新的輸入被創建，但焦點沒有被設置，事件不是被綁定到新的輸入;這告訴我我其他地方有什麼問題。有沒有更好的方式做到這一點比我如何做呢？創建一個控件然後將重點放在它上面並不難，但是我無法讓它正常工作。 – Jaden

我想你只是想在你的createTextBox函數中返回inp.id而不是next。這應該爲你解決問題。我可能會在不跟蹤下一個的情況下重寫此內容，但是如果您認爲由於某種原因需要它，請務必保留它。 – Tim

如果我不跟蹤下一個ID應該是什麼，我會通過什麼moveOnMax？我想我可以只是將最後一個的id加上子串，然後給它加上1。順便說一句 - 我改變了回報，我仍然得到相同的結果。也許這是下一個拋棄它。 – Jaden

動態創建帶有參數的javascript onkeyup事件的文本框

回答

相關問題