如何将 Select2 与 Inputmask 一起使用

Question

我正在尝试创建一个 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，并且行为相同。

我是不是漏掉了什么？

Answer 1

如果您必须使用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 与 Inputmask 一起使用

How to use Select2 with Inputmask

jquery-select2

jquery-inputmask