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

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

本文关键字:滚动 jquery 分区 字段 输入 javascript 表单      更新时间:2023-09-26

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

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>

您可以使用滚动到一个位置

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

要检索任何元素的位置,请使用:

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

然后有一个简单的对象,其中包含所选元素的位置。要检索顶部的像素,请使用:

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

注意:只有当选择器只选择一个元素时,这才会正确工作。