javascript - jquery输入掩码设置前缀后的起始输入点

标签 javascript jquery html jquery-inputmask

你好,我正在使用 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? 谢谢

最佳答案

一个棘手的解决方案是使用两个单独的输入,一个用于前缀 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" />

关于javascript - jquery输入掩码设置前缀后的起始输入点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51420149/

相关文章:

javascript - 为 Web Rails 开发人员提供的 Rubymine 技巧

jquery - 将字符串从 JS 传递到 Python Selenium

jquery - 415 不支持的媒体类型从 $.ajax 调用 WCF 服务

javascript - Jquery ui 自动完成错误不是函数

jquery - JS Supersized 插件 - 图像在视口(viewport)边缘被截断

javascript - 如何在 JavaScript 中将字符串转换为数组?

javascript - 如何将字符串附加到数组上?

html - 如何在iPhone/HTML5中完全隐藏导航栏

php - 在 JS 网页中模拟/模拟 iPhone Sprinboard 行为

javascript - 点击链接时如何获取(记录的)id?