Luc*_*uca 11 javascript internet-explorer jquery-select2
我尝试在网页中使用最新的select2 v4.0.3库.我在此页面上使用了给定的示例来进行标记和标记化.我在不同的浏览器中测试过它.它工作正常,但在Internet Explorer v.11中它表现得很奇怪:
我试图添加一个不在选项中的新元素.键入几个字符后,光标被带走,我无法完成输入的单词.当我点击选择框以获取光标时,半输入的单词消失了.所以似乎不可能输入超过3-4个字符.在IE中打开它时,我在select2.github.io/examples页面上遇到了相同的情况.
<html>
<head>
<link rel="stylesheet" href="css/select2.css" type="text/css" />
<script src="js/jquery-2.1.0.js" type="text/javascript"></script>
<script src="js/select2.full.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
$(".js-example-tokenizer").select2({
tags: true,
tokenSeparators: [',', ' ']
});
});
</script>
<select class="js-example-tokenizer" multiple="multiple" style="width: 600px;">
<option value="AL">Alabama</option>
<option value="WY">Wyoming</option>
</select>
</body>
</html>
不使用标记,select2也可以在IE中正常工作.但我想使用多选标记控件,用户也可以输入自由文本作为选定选项.
是否有一种解决方法可以让select2在IE中使用标记和标记化？
在IE11上用于测试的小提琴示例.
在GitHub上的问题涉及到这个问题.
这两个类:select2-container--focus select2-container--open当输入元素具有焦点并且选项下拉菜单打开时,分别位于输入容器上.
当我们开始输入时,下拉菜单的打开会使输入元素失去焦点(模糊).Select2需要重新关注元素.事实上,在选择二源代码,我们可以看到,更新方法完成重新聚焦的元素:this.$search.focus()(点击这里).
此代码在大多数浏览器中都能正常工作,但在IE v11中却没有,因为IE没有使用此Select2源代码重新聚焦于输入.该类select2-container--focus消失,焦点停留在下拉菜单上,这会产生错误.
在更新版本的Select2中,看起来他们尝试了修复:请点击此处.可悲的是,经过测试后,它仍然无法正常工作.我在这里看到的唯一解决方案是覆盖Select2源代码,直到修复程序被释放.否则,您需要使用不存在错误的版本(例如评论中提到的4.0.2).
基于GitHub问题(特别是这一个:GitHub问题),解决方案可能是:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<script type="text/javascript">
// Override update method
$.fn.select2.amd.require._defined['select2/selection/search'].prototype.update = function(a, b) {
var c = this.$search[0] == document.activeElement;
this.$search.attr("placeholder", "");
a.call(this, b);
this.$selection.find(".select2-selection__rendered").append(this.$searchContainer);
this.resizeSearch();
if (c) {
var self = this;
window.setTimeout(function() {
self.$search.focus();
}, 0);
}
};
$(document).ready(function() {
$(".js-example-tokenizer").select2({
tags: true,
tokenSeparators: [',', ' ']
});
});
</script>
<select class="js-example-tokenizer" multiple="multiple" style="width: 600px;">
<option value="AL">Alabama</option>
<option value="WY">Wyoming</option>
</select>| 归档时间： |
|
| 查看次数： |
1170 次 |
| 最近记录： |