Perfectly solve the problem that input cannot get focus when BootStrap modal box and select2 are used together.

Using the select2 plug-in in the bootstrap modal box will cause the input box in select2 to be unable to gain focus and input. How to solve this problem? The editor below brings you a solution to the problem that the input cannot gain focus when the BootStrap modal box and select2 are used together. Let’s take a look.

Using the select2 plug-in in the bootstrap modal box will cause select2 to The input input box cannot gain focus and cannot input.

Solution:

Change the tabindex="- 1" Delete (test successful):

<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">

can be processed in the onshow method. The main principle is because bootstrap's tabindex='-1 ', occupies the tabindex='0' of select2. After the script processes the modal box and displays it, delete the tabindex attribute of the modal box

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

Rewrite the enforceFocus method (tested to have no effect):

$.fn.modal.Constructor.prototype.enforceFocus = function() {};

The above is the detailed content of Perfectly solve the problem that input cannot get focus when BootStrap modal box and select2 are used together.. For more information, please follow other related articles on the PHP Chinese website!