Maison  >  Article  >  interface Web  >  Solution au problème selon lequel la zone de saisie sur la couche supérieure de la boîte contextuelle Bootstrap ne peut pas obtenir le focus

Solution au problème selon lequel la zone de saisie sur la couche supérieure de la boîte contextuelle Bootstrap ne peut pas obtenir le focus

高洛峰
高洛峰original
2016-12-24 10:43:461670parcourir

La zone de saisie sur la couche supérieure du modal de la boîte contextuelle Bootstrap ne peut pas obtenir le focus. Les détails sont les suivants

1 Dans le framework Bootstrap, la boîte contextuelle modale est actuellement uniquement. prend en charge un calque

C'est-à-dire que la boîte contextuelle modale ne peut plus être utilisée sur la boîte contextuelle actuelle.
Si vous utilisez une boîte de saisie contextuelle personnalisée, par exemple : http://my.oschina.net/tianma3798/blog/737232
S'il y a une zone de saisie de saisie dans la boîte de saisie contextuelle personnalisée, si la zone de saisie ne peut pas obtenir le focus. Les raisons possibles sont les suivantes :
Beaucoup utilisent pour définir des calques contextuels

<div class="modal fade" tabindex="0" role="dialog" id="myModal" data-backdrop="static">
 <div class="modal-dialog modal-lg">
  <div class="modal-content">
  <div class="modal-header">
   <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
   <h4 class="modal-title" id="myModalLabel">添加学校</h4>
  </div>
  <div class="modal-body">
   <form class="form-horizontal" name="myForm" novalidate>
   <input type="hidden" ng-model="entity.SchID" />
   <div class="form-group">
    <label for="SchName" class="col-sm-2 control-label">学校名称:</label>
    <div class="col-sm-10">
    <input type="text" required ng-minlength="3" ng-maxlength="30"
     class="form-control"
     ng-model="entity.SchName" name="SchName" placeholder="长度3-30">
    <span class="text-danger" ng-show="myForm.SchName.$dirty && myForm.SchName.$invalid">
     <span ng-show="myForm.SchName.$error.required">名称是必须的</span>
     <span ng-show="myForm.SchName.$error.minlength">最小长度3</span>
     <span ng-show="myForm.SchName.$error.maxlength">最大长度30</span>
    </span>
    </div>
   </div>
  
   <div class="form-group">
    <label for="WebSite" class="col-sm-2 control-label">学校官网:</label>
    <div class="col-sm-10">
    <input required type="url" class="form-control" ng-model="entity.WebSite" name="WebSite"
     placeholder="链接地址" />
    <span class="text-danger" ng-show="myForm.WebSite.$dirty && myForm.WebSite.$invalid">
     <span ng-show="myForm.WebSite.$error.required">姓名是必须的</span>
     <span ng-show="myForm.WebSite.$error.url">链接格式不正确</span>
    </span>
    </div>
   </div>
  
   <div class="form-group">
    <label for="FoundTime" class="col-sm-2 control-label">建校时间:</label>
    <div class="col-sm-10">
    <input required type="number" class="form-control" ng-model="entity.FoundTime" name="FoundTime"
     placeholder="年份" />
    <span class="text-danger" ng-show="myForm.FoundTime.$dirty && myForm.FoundTime.$invalid">
     <span ng-show="myForm.Summary.$error.required">姓名是必须的</span>
     <span ng-show="myForm.Summary.$error.number">请输入数字(年份)</span>
    </span>
    </div>
   </div>
   <div class="form-group">
    <label class="col-sm-2 control-label">入学时间:</label>
    <div class="col-sm-10">
    <div class="selectBox" id="selectMonth"></div>
    <input type="hidden" name="Province" ng-model="entity.MonthList" />
    </div>
   </div>
   </form>
  </div>
  <div class="modal-footer">
   <button type="button" class="btn btn-success" ng-disabled="myForm.$invalid" ng-click="addOrUpdate()">保存</button>
   <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
  </div>
  </div>
 </div>
 </div>

La solution est pour supprimer l'attribut tabindex="0", puis vous pourrez obtenir le focus

b7a1a52fcacd57bf709e405c19976454

Pour plus d'articles connexes sur la façon de résoudre le problème selon lequel la zone de saisie dans la couche supérieure de la fenêtre contextuelle modale Bootstrap ne peut pas obtenir le focus, veuillez prêter attention à le site PHP chinois !

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn