Javascript 基于相同形式的其他输入填充标记输入

我有一个有很多输入的表单。有时表单将有1个输入，有时多达10个输入。当有人填写每个输入时，我希望底部的标记字段也被填充。现在我有它的工作，但只有一组输入。（目前有3个）

我试图弄明白，不管页面上有多少输入，如何让它工作

HTML

一个很好的方法是将它们放入另一个输入中，而不是一个span，并在每个输入后面添加逗号，最后一个除外

---

我知道我可能遗漏了一些非常简单的内容。

您可能想缩小选择器的范围，这样它就不会选择页面上的所有文本输入

$("#input1,#input2,#input3").change(function () {
    var inputArray = [$("#input1").val(), $("#input2").val(), $("#input3").val()];
    $("#masterinput").val(inputArray.join(' '));
});

var inputs$ = $("input:text").change(function () {

    var inputArray = [];

    $.each(inputs$, function(i, v) {
        inputArray.push($(v).val());
    }

    $("#allInputs").text(inputArray.join(' '));
});

给你：

var str = "";
$("input[type=text]").change(function () {
            $("input[type=text]").each(function(){
             str += $(this).val()+",";       
};
});

$("#allInputs").html(str);

---

在您的示例中，您只允许3个输入，因为您有3个输入框，当这些输入框中的任何一个发生更改时，您的标记将被传输到跨度

现在听起来您希望允许多个条目，而不管有多少输入。你可以试试简单的东西，比如下面的小提琴

Html:

---

正如您所见，我们的处理程序绑定到所有输入，当任何输入接收到模糊事件时，将执行提取标记的方法。

使用val（）设置输入值什么是主输入？这是如何回答这个问题的？我试过了，而且很接近。我找了一个零钱$（'#tagEntry'）。模糊（函数（）{'而不是'$（'#tagAdd'）。单击（函数（）{'并删除了按钮。我还需要它来迭代输入字段，无论是1还是10。我仍然完全不知道我已经更新了JSFIDLE链接以使用5。实际上，它可以使用1到你需要的数量。太棒了。谢谢！应该能够找到它，但我这周太累了。我欠你一杯啤酒。

var inputs$ = $("input:text").change(function () {

    var inputArray = [];

    $.each(inputs$, function(i, v) {
        inputArray.push($(v).val());
    }

    $("#allInputs").text(inputArray.join(' '));
});

var str = "";
$("input[type=text]").change(function () {
            $("input[type=text]").each(function(){
             str += $(this).val()+",";       
};
});

$("#allInputs").html(str);

<div>
    <strong>Enter your tag and click add</strong>
    <br/>
    <input type="text" id="tagEntry" />
    <button id="tagAdd">Add</button>
</div>

<div>
    <strong>Entered Tags</strong>
    <br/>
    <input type="text" id="tagsEntered" />
</div>

var tags = [];

$(function() {

    $('#tagAdd').click(function(){
        //get the tag value and trim the spaces
        var tVal = $('#tagEntry').val().trim();
        if(tVal == '')
            return;

        //reset the entry box
        $('#tagEntry').val('');

        //verify tag not already saved
        for(var i=0;i<tags.length;i++)
            if(tags[i] == tVal)
                return;

        //add the tag to the array
        tags.push(tVal);

        //set the tags entry box
        $('#tagsEntered').val(tags.join(', '));

    });

});

<div>
    <strong>Enter your tag and click add</strong>
    <br/>
    <strong>Tag 1</strong>
    <input type="text" id="tagEntry" class="tagEntry" />
    <br/>
    <strong>Tag 2</strong>
    <input type="text" class="tagEntry" />
    <br/>
    <strong>Tag 3</strong>
    <input type="text" class="tagEntry" />
    <br/>
    <strong>Tag 4</strong>
    <input type="text" class="tagEntry" />
    <br/>
    <strong>Tag 5</strong>
    <input type="text" class="tagEntry" />

</div>

<div>
    <strong>Entered Tags</strong>
    <br/>
    <input type="text" id="tagsEntered" />
</div>

var tags = [];

$(function() {

    $('.tagEntry').blur(function(){
        //get the tag value and trim the spaces
        var tVal = $(this).val().trim();
        if(tVal == '')
            return;

        //reset the entry box
        $(this).val('');

        //verify tag not already saved
        for(var i=0;i<tags.length;i++)
            if(tags[i] == tVal)
                return;

        //add the tag to the array
        tags.push(tVal);

        //set the tags entry box
        $('#tagsEntered').val(tags.join(', '));
    });
});