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>

Jクエリ

$("#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 を使用すると、次のクラスを持つすべてのタグにぼかしイベントをバインドできます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(', '));
    });
});

ハンドラーがすべての入力にバインドされていることがわかるように、いずれかの入力が blur イベントを受け取ると、タグを抽出するメソッドが実行されます。

于 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 str = "";
$("input[type=text]").change(function () {
            $("input[type=text]").each(function(){
             str += $(this).val()+",";       
};
});

$("#allInputs").html(str);
于 2013-11-12T21:34:18.587 に答える
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 に答える