Heim > Web-Frontend > js-Tutorial > Hauptteil

Lösung für das Problem, dass das Eingabefeld auf der oberen Ebene des Bootstrap-Popup-Box-Modals den Fokus nicht erhalten kann

高洛峰
Freigeben: 2016-12-24 10:43:46
Original
1674 Leute haben es durchsucht

Das Eingabefeld auf der oberen Ebene des Modals des Bootstrap-Popup-Felds kann nicht fokussiert werden. Die Details sind wie folgt: 1. Im Bootstrap-Framework ist derzeit nur das modale Popup-Feld verfügbar unterstützt eine Ebene


Das heißt, das modale Popup-Feld kann nicht mehr für das aktuelle Popup-Feld verwendet werden.

Wenn Sie ein benutzerdefiniertes Popup-Feld verwenden, zum Beispiel: http://my.oschina.net/tianma3798/blog/737232

Wenn es ein Eingabefeld im benutzerdefinierten Popup-Feld gibt, wenn Das Eingabefeld kann nicht fokussiert werden. Die möglichen Gründe sind folgende:
Viele verwenden die Definition von Popup-Ebenen

<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>
Nach dem Login kopieren

Die Lösung ist um das tabindex="0"-Attribut zu entfernen, und dann können Sie den Fokus erhalten


Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage