Heim  >  Artikel  >  Web-Frontend  >  Lösen Sie perfekt das Problem, dass die Eingabe nicht den Fokus erhalten kann, wenn die modale BootStrap-Box und select2 zusammen verwendet werden.

Lösen Sie perfekt das Problem, dass die Eingabe nicht den Fokus erhalten kann, wenn die modale BootStrap-Box und select2 zusammen verwendet werden.

巴扎黑
巴扎黑Original
2017-09-02 13:32:433060Durchsuche

Die Verwendung des Select2-Plug-Ins im modalen Bootstrap-Feld führt dazu, dass das Eingabefeld in Select2 keinen Fokus und keine Eingabe erhalten kann. Wie kann dieses Problem gelöst werden? Der folgende Editor bietet Ihnen eine Lösung für das Problem, dass die Eingabe nicht den Fokus erhalten kann, wenn die BootStrap-Modalbox und select2 zusammen verwendet werden.

Die Verwendung des Select2-Plug-Ins in der Bootstrap-Modalbox führt dazu Das Problem in select2. Das Eingabefeld kann nicht fokussiert werden und kann nicht eingegeben werden.

Löschen Sie das auf der Seite (Testerfolg):

tabindex="-1" 

kann in der onshown-Methode verarbeitet werden. Das Hauptprinzip besteht darin, dass
von Bootstrap die

von select2 belegt, und das Skript tut dies Nachdem das Modalfeld angezeigt wurde, löschen Sie das Tabindex-Attribut des Modalfelds
<p id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 <p class="modal-header">
  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
  <h3 id="myModalLabel">Panel</h3>
 </p>
<p class="modal-body" style="max-height: 800px">
<p id="myModal" class="modal hide fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 <p class="modal-header">
  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
  <h3 id="myModalLabel">Panel</h3>
 </p>
<p class="modal-body" style="max-height: 800px">

tabindex='-1'tabindex='0'

und schreiben Sie die Methode „enforceFocus“ neu (der Test ergab, dass es keine Auswirkung hat). ):

BootstrapDialog.show({
   onshown: function (dialogRef) {
    $("#"+dialogRef.getId()).removeAttr("tabindex");
  }
})

Das obige ist der detaillierte Inhalt vonLösen Sie perfekt das Problem, dass die Eingabe nicht den Fokus erhalten kann, wenn die modale BootStrap-Box und select2 zusammen verwendet werden.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
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