У меня возникла проблема создания динамических полей со списком строк с использованием Javascript или JQuery

Question

У меня возникла проблема создания динамических полей с строка с использованием JavaScript или jQuery.

Брифинг

Я хочу создать динамические поля с помощью жала счета, например, когда я пишу текст на player textfield как это p1,p2,p3 они создают три file fields на dynamicDiv или когда я удалить какой-нибудь текст на player textfield например, p1,p2, в то же время они создают только два file fields, вот и все.

Весь сценарий зависит от keyup event

Код:

<script src="http://code.jquery.com/jquery-latest.js"></script> 
<script> 
function commasperatedCount(){ 
    var cs_count = $('#player').val(); 
    var fields = cs_count.split(/,/); 
    var fieldsCount = fields.length; 

    for(var i=1;i<=fieldsCount;i++){ 
     var element = document.createElement("input"); 
     element.setAttribute("type", 'file'); 
     element.setAttribute("value", ''); 
     element.setAttribute("name", 'file_'+i); 

     var foo = document.getElementById("dynamicDiv"); 
     foo.appendChild(element); 
    } 
} 
</script> 

<form> 
<label>CountPlayerData</label> 
<input type="text" name="player" id="player" onkeyup="return commasperatedCount();" autocomplete="off" /> 
<div id="dynamicDiv"></div> 

<input type="submit" /> 
</form> 

Answer 1

var seed = false, 
    c = 0, 
    deleted = false; 
$('#player').on('keyup', function(e) { 
    var val = this.value; 
    if ($.trim(this.value)) { 
     if (e.which == 188) { 
      seed = false; 
     } 
     if (e.which == 8 || e.which == 46) { 
      var commaCount = val.split(/,/g).length - 1; 
      if (commaCount < c - 1) { 
       deleted = true; 
      } 

     } 
     commasperatedCount(); 
    } else { 
     c = 0; 
     deleted = false; 
     seed = false; 
     $('#dynamicDiv').empty(); 
    } 
}); 

function commasperatedCount() { 
    if (deleted) { 
     $('#dynamicDiv input:last').remove(); 
     deleted = false; 
     c--; 
     return false; 
    } 
    if (!seed) { 
     c++; 
     var fields = '<input value="" type="file" name="file_' + c + '">'; 
     $('#dynamicDiv').append(fields); 
     seed = true; 
    } 
}​ 

DEMO

Answer 2

<script> 
    function create(playerList) { 
     try { 
      var player = playerList.split(/,/); 
     } catch(err) { 
      // 
      return false; 
     } 
     var str = ""; 

     for(var i=0; i<player.length; i++) { 
      str += '<input type="file" id="player-' + i + '" name="players[]" />'; 
      //you wont need id unless you are thinking of javascript validations here 
     } 

     if(playerList=="") {str="";} // just in case text field is empty ... 

     document.getElementById("dynamicDiv").innerHTML = str; 
    } 
</script> 

<input id="playerList" onKeyUp="create(this.value);" /><!-- change event can also be used here --> 

<form> 
    <div id="dynamicDiv"></div> 
</form>