我有一个问题，使用 Javascript 或 Jquery 创建具有字符串计数的动态字段

I have an issue to create dynamic fields with string count using Javascript OR Jquery

本文关键字：字符串 字段 动态 创建 问题 有一个 使用 Javascript Jquery      更新时间：2023-09-26

我有一个问题，使用 JavaScript 或 jQuery 创建具有字符串计数的动态字段。

简报

我想在刺痛计数的帮助下创建动态字段，例如，当我在这样的player textfield上编写一些文本时p1,p2,p3他们在dynamicDiv上创建了三个file fields，或者当我删除像这样的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>

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;
    }
}​

演示

<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>
相关文章：