Question

亲爱的，

我使用bootstrap 3.3.7并且我在同一页面上有多个模态，一个用于添加，一个用于编辑。

所以，当我第一次打开页面并单击添加按钮时，模式显示自动对焦，但如果我关闭它并再次重新打开它自动对焦不工作如果我使用添加然后编辑自动对焦不工作编辑。

我的JS代码：

$('.modal').on('shown.bs.modal', function() {
    $(this).find('[autofocus]').first().focus();
});

我的HTML代码：

<div class="modal fade" id="modal-add">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">إضافة قطعة</h4>
            </div>
            <div class="modal-body">
                <form name="AddForm" class="form-horizontal">
                    <div class="form-group">
                        <div class="col-md-12">
                            <input type="text" class="form-control" ng-model="new_spares_part.name" placeholder="اسم القطعة"  autofocus required>
                        </div>
                    </div>
                    <div class="form-group form-inline">
                        <div class="col-md-12">
                                <div class="checkbox form-inline">


                                  <label>
                                     مفعل  
                                  </label>
                                  <input  type="checkbox" ng-model="new_spares_part.is_active" class="form-control">


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

            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-default" ng-click="add(new_spares_part)" >إضافة</button>
            </div>
            </form>
        </div>
    </div>



</div>

  <div class="modal fade" id="modal-edit">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title"> تعديل {{spare_part.name}}</h4>
            </div>
            <div class="modal-body">
                <form name="editSparePart" class="form-horizontal">
                    <div class="form-group">
                        <div class="col-md-12">
                            <input type="text"  class="form-control" ng-model="spare_part.name" autofocus required>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-12">
                                <div class="checkbox">
                                  <label ng-if="spare_part.is_active == true">
                                    <input  type="checkbox" ng-model="spare_part.is_active" checked> مفعل
                                  </label>
                                  <label ng-if="spare_part.is_active != true">
                                    <input  type="checkbox" ng-model="spare_part.is_active" > مفعل
                                  </label>
                                </div>
                        </div>
                    </div>

            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-default" ng-click="update(spare_part)" >تعديل</button>
            </div>
            </form>
        </div>
    </div>



</div>

自动对焦无法在多个模态中工作

0 个答案: