我在使用 Javascript 或 Jquery 创建具有字符串计数的动态字段时遇到问题

Posted 2023-05-08

【中文标题】我在使用 Javascript 或 Jquery 创建具有字符串计数的动态字段时遇到问题

【英文标题】：I have an issue to create dynamic fields with string count using Javascript OR Jquery

【发布时间】：2012-06-08 08:54:51

【问题描述】：

我在使用 javascript 或 jQuery 创建具有 string 计数的动态字段时遇到问题。

简报

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

【问题讨论】：

您知道您可以在文件输入上设置multiple 属性并以这种方式上传多个文件。尽管这样做，所有文件都将在相同的 input name 属性下上传。

【参考方案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

【讨论】：

如果我在 keyup 事件上调用此函数，他们生成了多个文件字段，您必须尝试此代码并回复我如何解决此问题@thecodeparadox

@QueryMaster 你可以用 blur 绑定它

yah 80% 它为我工作，但是当我在 textfiled 上写一些文本时，我遇到了一个问题，像这样 p1,p2 他们只生成一个字段，或者当我在像这样 p1 的文本字段上写一些文本时,p2,p3 他们只生成了 2 个字段实际上我想要当我在文本字段上写一些像这样的 p1,p2 的文本时，他们会生成两个字段如果您对此有任何想法，请回复我等待您回复

@QueryMaster 请看演示

感谢您的回复，但不幸的是，当我删除文本字段上的一些文本时，此代码中存在一个小问题，该功能无论如何都不起作用thanx

【参考方案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>