如何将 Select2 与 Inputmask 一起使用答案

【问题标题】：How to use Select2 with Inputmask如何将 Select2 与 Inputmask 一起使用
【发布时间】：2018-04-22 22:48:45
【问题描述】：

我正在尝试使用InputMask 创建一个Select2 框来插入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，并且行为是相同的。

我错过了什么吗？

【问题讨论】：

我有一个解决方案，但您需要使用版本
仅供参考，我通过在 Inputmask 插件上使用 jQuery Mask 插件来使用版本 4.0.6-rc1：igorescobar.github.io/jQuery-Mask-Plugin 我知道你的问题指定了 Inputmask，但如果你能够切换然后这可能是您的选择。

标签： jquery-select2 jquery-inputmask

【解决方案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'
});

【讨论】：