如何在多次克隆表单时使用 javascript 或 jquery 自动滚动到聚焦的输入字段分区

Question

自动滚动到焦点输入字段表单分区。我正在克隆表单以一次添加更多用户。所以当我点击添加按钮时它必须向下滚动到输入字段

HTML:

    $(document).ready(function() {
        $('#id_i_fa_add').click(function duplicate() {
            $('#id_i_fa_add').off('click');
            $('.fa.fa-trash').off('click');
            var original = document.getElementById('id_div_add' + i);
            var clone = original.cloneNode(true);
            $('#' + clone.id + " a i").attr('class', 'fa fa-trash');
            $('#' + clone.id + " a i").attr('id', 'id_i_fa_del' + i);
            clone.id = "id_div_add" + ++i;
            clone.querySelectorAll("[id = 'id_span_error_email" + (i - 1) + "']")[0].id = 'id_span_error_email' + i;
            $(clone).find('input').val("");
            $(clone).find('span').text("");
            document.getElementById('id_form_append').appendChild(clone);
            $('#id_form_append input').focus();

            $('#id_i_fa_add').on('click', duplicate);
            $('.fa.fa-trash').on('click', duplicate_trash);
        });
    });

    function duplicate_trash() {
        var trash_id = this.id;
        var parent_trash_id = $('#' + trash_id).parents().eq(1).attr('id');
        $('#' + parent_trash_id).remove()
    }

        <form id='id_form_append' action="#">
            <div id='id_div_append'>
                <div id='id_div_add0' class="panel_box">
                    <div class="form_group">
                        <label>Email Address</label>
                        <div class="form-group form-inline">
                            <div class="input-group" style="width: 100%;">
                              <input name="email" type="text" class="form-control" placeholder="e-mail" autofocus>
                              <div class="input-group-addon">domains</div>
                            </div>
                         </div>
                        <span id='id_span_error_email0' class='class_span0'></span>
                    </div>
                    <a class="action" href="#">
                        <i id='id_i_fa_add' class="fa fa-plus"></i>
                    </a>

                </div>
            </div>
        </form>

Answer 1

您可以使用以下方式滚动到某个位置：

$(window).scrollTop(/* pixel count */)

要检索任何元素的位置，请使用：

$(/* selector */).position()

然后您将得到一个包含所选元素位置的简单对象。要检索顶部的像素，请使用：

$(/* selector */).position().top

注意：只有当您的选择器恰好选择了一个元素时，这才会正常工作。

如何在多次克隆表单时使用 javascript 或 jquery 自动滚动到聚焦的输入字段分区

How to auto scroll to the focused input field division using javascript or jquery while cloning the form multiple times

html

javascript

jquery

django-forms