我使用 select2 jquery 插件和放大的弹出窗口。如果我在打开的弹出窗口中单击选择,则会出现带有一些结果的搜索框。问题是无法在搜索框中输入任何内容 - 光标根本不出现。这是演示问题的 jsfiddle http://jsfiddle.net/clime/qweWa/15/ 。代码如下:
# html
<a href="#test-popup" class="open-popup-link">Show inline popup</a>
<div id="test-popup" class="white-popup mfp-hide">
<select id="focus-blur-loop-select">
<option>hello</option>
<option>world</option>
</select>
</div>
# js
$(function() {
$('.open-popup-link').magnificPopup({
type:'inline',
midClick: true
});
$('#focus-blur-loop-select').select2({
width: '200px'
});
});
# css
.white-popup {
position: relative;
background: #FFF;
padding: 20px;
width: auto;
max-width: 500px;
margin: 20px auto;
}
我已经做了一些基础研究,我发现下面的两个回调是无限期调用的。事件中似乎存在无限循环。
// select2.js:742
search.on("focus", function () { search.addClass("select2-focused"); });
search.on("blur", function () { search.removeClass("select2-focused");});
最佳答案
答案在这里:https://github.com/dimsemenov/Magnific-Popup/issues/280 。该问题是由 select2 输入从弹出元素中渲染出来引起的。它可以通过重写弹出窗口的 _onFocusIn 方法来修复:
$.magnificPopup.instance._onFocusIn = function(e) {
// Do nothing if target element is select2 input
if( $(e.target).hasClass('select2-input') ) {
return true;
}
// Else call parent method
$.magnificPopup.proto._onFocusIn.call(this,e);
}
关于jquery - 在放大弹出窗口中选择2 : search input cannot be focused,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19990191/