Jquery输入掩码在前缀后设置起始输入点答案

【问题标题】：Jquery input mask set starting input point after prefixJquery输入掩码在前缀后设置起始输入点
【发布时间】：2018-12-27 10:39:28
【问题描述】：

您好，我正在使用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部分）。有可能吗？使用这个输入掩码还是 jQuery？谢谢

【问题讨论】：

phoneInputs.on('focus click', function(e) {var v = $(this).val(); if(!v){$(this).val("+420");} });
它不起作用。当我开始打字时，420 被附加到末尾。当我写 123 时，结果是 123 420。
明确定义“第一个普通电话号码”对我来说这些都不是我当地的有效电话号码，因此我们需要明确。
我所在国家的电话号码是+420 XXX XXX XXX。其中 X 是数字 0-9

标签： javascript jquery html jquery-inputmask

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

注意：

您需要将输入掩码占位符更新为" ___ ___ ___"，因此它不考虑+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" />

【讨论】：

【解决方案2】：

您可以在掩码定义中包含您的前缀，注意转义任何保留字符。

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

【讨论】：

我必须确认这一点，但只有“+”会被转义。如果您还需要前缀“420”，请尝试phoneInputs.inputmask("\\+\\4\\2\\0 999 999 999")