1

我有一个包含一堆输入的表单。有时表单会有 1 个输入，有时最多有 10 个输入。当有人填写每个输入时，我希望底部的标签字段也被填充。现在我让它工作但只有一组输入。（目前 3 个）。

无论页面上有多少输入，我都试图弄清楚如何使其工作。

HTML

Input1 <input id="input1" name="input1" type="text" value="" />
<br/>
Input2 <input id="input2" name="input2" type="text" value="" />
<br/>
Input3 <input id="input3" name="input3" type="text" value="" />
<br/>
<p>List of inputed text</p>
<span id="allInputs"></span>

jQuery

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

一个很好的方法是将它们放入另一个输入而不是跨度，并在每个输入之后添加一个逗号，除了最后一个。

我知道我可能在这里遗漏了一些非常简单的东西。

4

4 回答 4

2

在您的示例中，您只允许 3 个输入，因为您有 3 个输入框，当这些输入框中的任何一个更改您的标签时，您的标签就会被转移到跨度。

现在，无论输入多少，听起来您都希望允许多个条目。你可以尝试一些简单的东西，比如下面的小提琴。

http://jsfiddle.net/K2g4z/

html:

<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>

Javascript：

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(', '));

    });

});

更新：

JSFiddle 链接http://jsfiddle.net/K2g4z/1/现在支持根据需要使用多个输入。为了实现这一点，而不是选择元素 ID，我们绑定到一个类名。给定以下 Html。

<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>

所有的标签输入框都有一个类，tagEntry现在这个类将成为我们的选择器。使用下面的 JS，我们可以将 blur 事件绑定到每个具有 this 类的标签，tagEntry.现在每次输入更改时都会更新标签框。

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(', '));
    });
});

如您所见，我们的处理程序绑定到所有输入，因为任何输入接收到模糊事件，提取标签的方法都会被执行。

于 2013-11-12T21:38:31.423 回答
0 
$("#input1,#input2,#input3").change(function () {
    var inputArray = [$("#input1").val(), $("#input2").val(), $("#input3").val()];
    $("#masterinput").val(inputArray.join(' '));
});
于 2013-11-12T21:29:54.050 回答
0

您可能希望缩小选择器的范围，使其不会选择页面上的所有文本输入。

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

    var inputArray = [];

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

    $("#allInputs").text(inputArray.join(' '));
});
于 2013-11-12T21:32:23.143 回答
0

干得好：

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

$("#allInputs").html(str);
于 2013-11-12T21:34:18.587 回答