jQuery输入掩码设置前缀后的起始输入点

Question

你好，我使用jquery 输入mask ，我陷入了困境。

我有一个电话号码格式（+420 XXX XXX XXX），其中X是数字。

这是我当前的代码

 phoneInputs.inputmask("+999 999 999 999", {
        "placeholder": "+420 ___ ___ ___",
        "onincomplete": function(){
            $(this).addClass("incomplete");
        },
        "oncomplete": function(){
            $(this).removeClass("incomplete");
        }
    });

一切正常，但问题是当我开始在输入中键入内容时，我重写了+420数字。

我想开始写第一个普通电话号码的索引（而不是+420部分）。 有可能吗？ 使用这个inputmask还是jQuery？ 谢谢

Answer 1

一种棘手的解决方案是使用两个单独的输入，一个disabled输入作为前缀，第二个用于动态电话号码，以及一些CSS样式以获取样式，因为它只是一个字段：

HTML：

<input type="text" id="prefix" value="+420" disabled/>
<input type="text" id="phoneInput" />

JS：

let phoneInputs = $("#phoneInput");
phoneInputs.inputmask(" 999 999 999", {
  "placeholder": " ___ ___ ___",
  "onincomplete": function() {
    $(this).addClass("incomplete");
  },
  "oncomplete": function() {
    $(this).removeClass("incomplete");
  }
});

注意：

• 您需要将inputmask占位符更新为" ___ ___ ___" ，因此它不考虑+420部分。
• 而要获取完整的输入值，您只需要将两个输入值组合即可。

演示：

这是一个有效的演示：

 let phoneInputs = $("#phoneInput"); phoneInputs.inputmask(" 999 999 999", { "placeholder": " ___ ___ ___", "onincomplete": function() { $(this).addClass("incomplete"); }, "oncomplete": function() { $(this).removeClass("incomplete"); } }); 

 input[type="text"]#prefix { -webkit-appearance: none!important; text-decoration:none; text-align: right; width: 35px; border: 1px solid gray; border-right: 0px; margin: 0 0 0 -7px; background: white; } input[type="text"]#phoneInput { -webkit-appearance: none!important; border: 1px solid gray; margin-left: -4px; border-left: 0px; outline: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://www.jqueryscript.net/demo/Easy-jQuery-Input-Mask-Plugin-inputmask/dist/jquery.inputmask.bundle.min.js"></script> <label>Phone number:</label> <input type="text" id="prefix" value="+420" disabled/> <input type="text" id="phoneInput" /> 

Answer 2

您可以在掩码定义中包含前缀，请注意转义所有保留字符。

phoneInputs.inputmask("\\+420 999 999 999", { "escapeChar": "\\" });