如何将 Select2 与 Inputmask 一起使用
How to use Select2 with Inputmask
我正在尝试创建一个 Select2 box with InputMask 来插入 IP 地址并将它们添加为标签。
如果我单独使用这些库中的任何一个,它就像一个魅力,但两者一起会导致奇怪的行为。
当我输入数字时,掩码没有被填满,而是似乎在扩大。
我将 select2 <input class=“select2-search__field“>
的类型从 search
更改为 text
。 Inputmask 库使这成为必要,但它不应该导致错误,因为类型是 functionally identical.
我创建了一个 Fiddle 来显示行为:Fiddle
HTML:
<select multiple id="sel1" style="width:100%"></select>
JS:
$("#sel1")
.select2({
tags: true
})
.on("select2:open", function () {
$(".select2-search__field")
.attr("type","text")
.inputmask({alias: "ip", greedy: false});
})
在我的本地示例中,我更改了库以支持 search
,并且行为相同。
我是不是漏掉了什么?
如果您必须使用4.0.5
.
版本,那么有个坏消息要告诉您
通过将 select2 降级到版本 4.0.2
已在 jsfiddle 中修复
主要是版本<= 4.0.2
https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.js
尝试了 4.0.3
到 4.0.6-rc.1
但没有成功。
用 select2 打开 issue select2#5216。
我做了一点改动,但这与问题本身无关。
$('.select2-search__field').attr('type', 'text');
$('.select2-search__field').attr('style', 'width: 10em;');
$('.select2-search__field')
.inputmask({
alias: 'ip'
});
我正在尝试创建一个 Select2 box with InputMask 来插入 IP 地址并将它们添加为标签。
如果我单独使用这些库中的任何一个,它就像一个魅力,但两者一起会导致奇怪的行为。
当我输入数字时,掩码没有被填满,而是似乎在扩大。
我将 select2 <input class=“select2-search__field“>
的类型从 search
更改为 text
。 Inputmask 库使这成为必要,但它不应该导致错误,因为类型是 functionally identical.
我创建了一个 Fiddle 来显示行为:Fiddle
HTML:
<select multiple id="sel1" style="width:100%"></select>
JS:
$("#sel1")
.select2({
tags: true
})
.on("select2:open", function () {
$(".select2-search__field")
.attr("type","text")
.inputmask({alias: "ip", greedy: false});
})
在我的本地示例中,我更改了库以支持 search
,并且行为相同。
我是不是漏掉了什么?
如果您必须使用4.0.5
.
通过将 select2 降级到版本 4.0.2
主要是版本<= 4.0.2
https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.js
尝试了 4.0.3
到 4.0.6-rc.1
但没有成功。
用 select2 打开 issue select2#5216。
我做了一点改动,但这与问题本身无关。
$('.select2-search__field').attr('type', 'text');
$('.select2-search__field').attr('style', 'width: 10em;');
$('.select2-search__field')
.inputmask({
alias: 'ip'
});