Question

我正在为文本字段（即xxx-xxx-xxxx）上的电话掩码编写jQuery插件。它应该非常简单 - 只需在用户输入时将连字符插入适当的位置即可。由于各种原因，我不能使用插件。它必须从头开始。我发现的唯一真正的插件对我的目的来说有点过于宽泛。我现在正在做这样的事情：

var number = phoneTextbox.val().replace(/\D/g, '');

var output = "";
for (var i = 0; i < number.length; i++) {
    if (i == 2) {
        output += number[i] + '-';
    } else if (i == 5) {
        output += number[i] + '-';
    } else {
        output += number[i];
    }
}
phoneTextbox.val(output);

但是在尝试编辑或删除数字时它会变得很糟糕。那些只是处理像我一样简单的用例的更简单的解决方案吗？

编辑：我想我的'掩盖'术语让一些人感到困惑。通过屏蔽，我的意思是这个插件实现的功能：http://igorescobar.github.io/jQuery-Mask-Plugin/ - 如果允许的话，我会使用它！

Answer 1

function formatPhone(p){
   if (p.length !== 10){
       console.warn("Invalid phone length");
       return p;
   }
   return [p.substr(0,3), p.substr(3,3), p.substr(6,4)].join("-");
}

这是一个显示如何使用它的小提琴：http://jsfiddle.net/692ckv12/

Answer 2

<强> jsFiddle Demo

只需使用内置构造进行遮罩，并使用一些简单的javascript进行对焦。

HTML

<div>
 <div>Phone Number</div>
 <div class="phone">
    ( <input type="password" maxlength="3" width="10px" /> ) <input type="password" maxlength=3 /> - <input type="password" maxlength=4 />
 </div>
</div>

CSS

.phone input{
 padding:1px;
 width: 15px;
 text-align:center;
}
.phone input:last-child{
 width: 20px;
}

JS

var inputs = document.querySelectorAll('.phone input');
for(var i = 0; i < 2; i++){
 var input = inputs[i];
 (function(copy){
  input.oninput = function(){
   if(this.value.length == this.getAttribute("maxlength")){
    inputs[copy+1].focus();      
   }
  };
 })(i);
}

Answer 3

那里已经有插件允许屏蔽输入字段;无需重新发明轮子。例如，请查看Masked Input Plugin（或只是谷歌搜索“jquery mask input”）。

在jQuery中简单的手机屏蔽

3 个答案: