자바 스크립트 또는 Jquery를 사용하여 문자열 개수가 동적 인 필드를 생성하는 데 문제가 있습니다.

Question

문자열이 동적 필드를 만들 때 JavaScript 또는 jQuery를 사용하여 카운트가 발생했습니다.

브리핑

나는 그들이 dynamicDiv 세 file fields을 만들 player textfield p1,p2,p3 같은 일부 텍스트를 쓸 때, 예를 들어, 수를 따끔의 도움으로 동적 필드를 만들려면

아니면 player textfield에 텍스트를 제거 할 때 같은 시간에 p1,p2처럼 그들은 단지 2 개의 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>