0

Chrome Postman拡張機能に触発されて、特定のフィールドに移動したときに新しい入力フィールドを自動的に追加して、新しいフィールドにフォーカスを与えることで、マルチフィールドフォームセクションを実装したいと思います。以下のスクリーンショットは、これがPostmanでどのように機能するかを示しています。一番下の行にはいくつかの入力が含まれており、そこに移動すると、その上に新しい行が追加され、入力することができます。

郵便配達員

JavaScript / jQueryでこの動作を実現するにはどうすればよいですか？問題を単純化するために、行ごとに1つの入力フィールドのみが必要です。ソリューションの開始点として役立つフィドルを作成しました。

HTMLの例：

<div id="last-row">
  <input name="multifield" placeholder="Value"></input>
</div>

</ p>

4

3 に答える 3

4

私がそれをどのように行うかを見てください：http：//jsfiddle.net/jCMc8/8/

html：

<section>
    <div id="initRow">
        <input name="multifield" placeholder="Value">
    </div>
</section>​

javascript：

function addRow(section, initRow) {
    var newRow = initRow.clone().removeAttr('id').addClass('new').insertBefore(initRow),
        deleteRow = $('<a class="rowDelete"><img src="http://i.imgur.com/ZSoHl.png"></a>');

    newRow
        .append(deleteRow)
        .on('click', 'a.rowDelete', function() {
            removeRow(newRow);
        })
        .slideDown(300, function() {
            $(this)
                .find('input').focus();
        })
}

function removeRow(newRow) {
    newRow
        .slideUp(200, function() {
            $(this)
                .next('div:not(#initRow)')
                    .find('input').focus()
                    .end()
                .end()
                .remove();
        });
}

$(function () {
    var initRow = $('#initRow'),
        section = initRow.parent('section');

    initRow.on('focus', 'input', function() {
        addRow(section, initRow);
    });
});

</ p>

于 2012-12-10T13:53:35.803 に答える
3

これが私がやる方法です。

HTML：

<table>
    <tbody>
        <tr class="item">
            <td><input name="multifield" placeholder="Value" /></td>
            <td><i class="icon delete"></i></td>
        </tr>

        <tr class="item inactive">
            <td><input name="multifield" placeholder="Value" /></td>
            <td><i class="icon delete"></i></td>
        </tr>
    </tbody>
</table>

JavaScript：

$("table")
    .on("click focus", ".item.inactive", function(e) {
        var curRow = $(this);
        curRow.clone().appendTo("table tbody");
        curRow.removeClass("inactive").find("input:first").focus();
    })
    .on("click", ".icon.delete", function(e) {
        $(this).closest("tr").remove();
    });

jsFiddleのテストケースを参照してください。

于 2012-12-10T13:42:30.133 に答える
0

私はこれまでのところうまくいくように見える解決策を考え出しましたが、それが良いものであるかどうかについて他の人から聞くことに興味があります。私がやっていることは、最後の入力フィールドのフォーカスイベントをキャッチし、新しい行を追加して、その行内の入力フィールドにフォーカスを与えることです。動作するコードについては、このフィドルを参照してください。

HTML：

<div id="last-row">
    <input name="multifield" placeholder="Value">
</div>

JavaScript：

var lastRow = $('#last-row');
var lastInput = lastRow.find('input');

function addRow() {
    var newRow = $('<div><input name="multifield" placeholder="Value"><a class="row-delete"><img src="http://i.imgur.com/ZSoHl.png" /></a></div>');
    var newInput = newRow.find('input');
    lastRow.before(newRow);
    newInput.focus();

    var newDelete = newRow.find('a');
    newDelete.click(function() {
        newRow.remove();
    });
}

lastInput.focus(function() {
    addRow();
});
于 2012-12-10T11:43:43.610 に答える