当单击按钮时,输入字段将自动聚焦

when a button will clicked an input field will auto focus

本文关键字:聚焦 字段 输入 单击 按钮      更新时间:2023-09-26

请参阅下面的fiddle链接。点击"电话1"部分的绿色按钮后,我需要用"电话2"部分的绿按钮集中输入。有可能吗?帮帮我。

看看这个jsfiddle

JS

(function ($) {
    $(function () {
        var addFormGroup = function (event) {
            event.preventDefault();
            var $formGroup = $(this).closest('.form-group');
            var $multipleFormGroup = $formGroup.closest('.multiple-form-group');
            var $formGroupClone = $formGroup.clone();
            $formGroup.find('input[type=radio]').attr('disabled', 'true')
            $(this).toggleClass('btn-success btn-add btn-danger btn-remove').html('<i class="fa fa-minus"></i>');
            $formGroupClone.find('input').val('');
            $formGroupClone.find('.concept').text('Phone');
            $formGroupClone.insertAfter($formGroup);
            var $lastFormGroupLast = $multipleFormGroup.find('.form-group:last');
            if ($multipleFormGroup.data('max') <= countFormGroup($multipleFormGroup)) {
                $lastFormGroupLast.find('.btn-add').attr('disabled', true);
            }
        };
        var removeFormGroup = function (event) {
            event.preventDefault();
            var $formGroup = $(this).closest('.form-group');
            var $multipleFormGroup = $formGroup.closest('.multiple-form-group');
            var $lastFormGroupLast = $multipleFormGroup.find('.form-group:last');
            if ($multipleFormGroup.data('max') >= countFormGroup($multipleFormGroup)) {
                $lastFormGroupLast.find('.btn-add').attr('disabled', false);
            }
            $formGroup.remove();
        };
        var selectFormGroup = function (event) {
            // event.preventDefault();
            // var $selectGroup = $(this).closest('.input-group-select');
            // var param = $(this).attr("href").replace("#","");
            // var concept = $(this).text();
            // $selectGroup.find('.concept').text(concept);
            // $selectGroup.find('.input-group-select-val').val(param);

        }
        var countFormGroup = function ($form) {
            return $form.find('.form-group').length;
        };
        $(document).on('click', '.btn-add', addFormGroup);
        $(document).on('click', '.btn-remove', removeFormGroup);
        $(document).on('click', '.dropdown-menu a', selectFormGroup);
    });
})(jQuery);

HTML

<div class="col-xs-10">
    <div style="padding-left:17px; padding-right:17px;">
        <label>phone 1</label>
        <div class="form-group multiple-form-group">
            <div class="input-group">
                <input type="text" name="contacts['value'][]" class="form-control" placeholder="Add email address" style="border-radius:0;"> <span class="input-group-btn">
                                            <button type="button" class="btn btn-success btn-add" style="border-radius:0;">
                                                <i class="fa fa-plus"></i>
                                            </button>
                                        </span>
            </div>
            <div class="clearfix">
                <div class="col-xs-4" style="background:#fff;">
                    <div class="radio">
                        <label style="padding:0; width:100%; font-size:16px;">
                            <input type="radio" name="cell_no">Mobile</label>
                    </div>
                </div>
                <div class="col-xs-4" style="background:#fff;">
                    <div class="radio">
                        <label style="padding:0; width:100%; font-size:16px;">
                            <input type="radio" name="cell_no">Phone</label>
                    </div>
                </div>
                <div class="col-xs-4" style="background:#fff;">
                    <div class="radio">
                        <label style="padding:0; width:100%; font-size:16px;">
                            <input type="radio" name="cell_no">Work</label>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div style="padding-left:17px; padding-right:17px;">
        <label>phone 2</label>
        <div class="form-group multiple-form-group">
            <div class="input-group">
                <input type="text" name="contacts['value'][]" class="form-control" placeholder="Add email address" style="border-radius:0;"> <span class="input-group-btn">
                                            <button type="button" class="btn btn-success btn-add" style="border-radius:0;">
                                                <i class="fa fa-plus"></i>
                                            </button>
                                        </span>
            </div>
            <div class="clearfix">
                <div class="col-xs-4" style="background:#fff;">
                    <div class="radio">
                        <label style="padding:0; width:100%; font-size:16px;">
                            <input type="radio" name="cell_no">Mobile</label>
                    </div>
                </div>
                <div class="col-xs-4" style="background:#fff;">
                    <div class="radio">
                        <label style="padding:0; width:100%; font-size:16px;">
                            <input type="radio" name="cell_no">Phone</label>
                    </div>
                </div>
                <div class="col-xs-4" style="background:#fff;">
                    <div class="radio">
                        <label style="padding:0; width:100%; font-size:16px;">
                            <input type="radio" name="cell_no">Work</label>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

您可以使用jQuerys focus()方法。像这样:

$formGroupClone.find('input[type=text]').focus()

您必须在addFormGroup中添加此行

var addFormGroup = function (event) {
        event.preventDefault();
        var $formGroup = $(this).closest('.form-group');
        var $multipleFormGroup = $formGroup.closest('.multiple-form-group');
        var $formGroupClone = $formGroup.clone();
        $formGroup.find('input[type=radio]').attr('disabled','true')
        $(this).toggleClass('btn-success btn-add btn-danger btn-remove').html('<i class="fa fa-minus"></i>');
        $formGroupClone.find('input').val('');
        $formGroupClone.find('.concept').text('Phone');
        $formGroupClone.insertAfter($formGroup);
        $formGroupClone.find('input[type=text]').focus()
        var $lastFormGroupLast = $multipleFormGroup.find('.form-group:last');
        if ($multipleFormGroup.data('max') <= countFormGroup($multipleFormGroup)) {
            $lastFormGroupLast.find('.btn-add').attr('disabled', true);
        }
    };

jsfiddle也更新了http://jsfiddle.net/o6h1L9j8/5/