BootStrap 모달박스와 select2를 함께 사용할 때 입력이 포커스를 얻지 못하는 문제를 완벽하게 해결합니다.

부트스트랩 모달 상자에서 select2 플러그인을 사용하면 select2의 입력 상자가 포커스와 입력을 얻을 수 없게 됩니다. 이 문제를 해결하는 방법? 아래 편집기는 BootStrap 모달 상자와 select2가 결합될 때 입력이 포커스를 얻을 수 없는 문제에 대한 솔루션을 제공합니다. 부트스트랩 모달 상자에서 select2 플러그인을 사용하면 select2의 입력 상자가 포커스를 얻을 수 있습니다. 포커스를 받을 수는 없지만 입력할 수는 없습니다.

해결 방법: 페이지에서 tabindex="-1" 삭제(테스트 성공):

tabindex="-1"  删掉（测试成功）:

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

可以在onshown方法里面做处理，主要原理就是因为bootstrap的tabindex='-1',占用了select2的tabindex='0'

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

좋아요 onshown 메서드에서 처리하는 주요 원칙은 부트스트랩의 tabindex='-1'가 select2의 tabindex='0'를 차지하고 스크립트는 모달 상자가 표시된 후 모달 상자의 tabindex 속성을 삭제하세요

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

enforceFocus 메서드를 다시 작성하세요(테스트 결과 효과가 없는 것으로 나타났습니다).

🎜🎜rrreee

위 내용은 BootStrap 모달박스와 select2를 함께 사용할 때 입력이 포커스를 얻지 못하는 문제를 완벽하게 해결합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!