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