单击按钮时，输入字段将自动对焦

Question

请参阅以下小提琴链接。点击“手机1”部分的绿色按钮后，我需要用“手机2”部分的绿色按钮聚焦输入。可能吗？帮助我。

see this 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>

Answer 1

您可以使用jQuery focus（）方法。像这样：

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

您必须在添加FormGroup

中添加此行

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/