限制使用jquery append和keyup創建的輸入類型的數量

Question

我正在嘗試爲輸入到文本區域的每個單詞創建一個html元素。我的代碼到目前爲止是：

<table id="sentencetable"> 
    <tr> 
    <th colspan="2">Enter Sentence</th>  <!-- colspan used to add text over multiple columns --> 
    </tr> 
    <tr> 
    <td style="vertical-align:top"> 
     English : 
    </td> 
    <td> 
     <textarea name="english" required></textarea>    <!-- inputs text areat in table data --> 
    </td> 
    </tr> 
    <tr> 
    <td style="vertical-align:top"> 
     Sanskrit : 
    </td> 
    <td> 
     <textarea id="sanskrit" name="sanskrit" required></textarea> 
    </td> 
    </tr> 

    <tr> 
    <table id="add"> 

    </table> 
    </tr> 
</table> 

<script> 
$(document).ready(function(){ 
    $('#sanskrit').keyup(function(){ 
     var sanskrit = this.value.trim();      
     var x = sanskrit.split(' '); 
     for(var i = 0; i < x.length; i++){ 
      $('#add').append('<input style="width:70px" placeholder="Enter Root" type="text" name="root'+i+'" required/>') 
     } 
    }); 
}); 
</script> 

但是每個鍵的按下它會創建一個新的文本字段，我只是想創建一個新的文本字段在梵文textarea的輸入的每一個字。任何想法如何做到這一點。

Answer 1

$(document).ready(function() { 
    $('#sanskrit').keyup(function() { 
     $.each(this.value.trim().split(/\s+/), function(i) { 
      if (! $('[name="root'+i+'"]').length) { 

       var inp = $('<input />', { 
        css   : "width:70px", 
        placeholder : "Enter Root", 
        type  : "text", 
        name  : "root" + i, 
        required : "required" 
       }); 

       $('#add').append(inp) 
      } 
     }); 
    }); 
}); 

FIDDLE

Answer 2

傾聽空格鍵：當你去創造一個新詞

$('#sanskrit').keyup(function(e){ 
    if(e.which === 32){ 
     var sanskrit = this.value.trim(), 
      x = sanskrit.split(' '), 
      $add = $('#add'); 

     for(var i = 0; i < x.length; i++){ 
      if($add.find('input[name="root'+i+'"]').length === 0){ 
       $add.append('<input style="width:70px" placeholder="Enter Root" type="text" name="root'+i+'" required/>') 
      } 
     } 
    } 
}); 

像這樣的事情只會只執行的功能。

我編輯這個只添加新的項目，如果他們不存在。