Question

您好，我正在使用jquery input 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": "\\" });

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

2 个答案: