键入时格式化 phone 数字 (xxx) xxx - xxxx

Question

我正在 knockout 中编写自定义 bindingHandler 以在输入时按照以下格式格式化（美国）phone 数字。

(xxx) xxx - xxxx

HTML代码...

 <input type="text" data-bind="phoneNumber: phone" />

和绑定处理程序...

 ko.bindingHandlers.phoneNumber = {
    init: function(element, valueAccessor, allBindings) {
        ko.bindingHandlers.value.init(element,valueAccessor, allBindings);
        },    
    update: function(element, valueAccessor) {
        var phone = ko.utils.unwrapObservable(valueAccessor());
        if (!phone) return;
        var output;
        input = phone;
        input = input.replace(/[^0-9]/g, '');
        var areaCode = input.substr(0, 3);
        var nextThreeDigits = input.substr(3, 3);
        var lastFourDigits = input.substr(6, 4); 

        if (areaCode.length < 3) {
            output = "(" + areaCode;
        } else if (areaCode.length == 3 && nextThreeDigits.length < 3) {
          output = "(" + areaCode + ")" + " " + nextThreeDigits;
        } else if (areaCode.length == 3 && nextThreeDigits.length == 3) {
          output = "(" + areaCode + ")" + " " + nextThreeDigits + "-" + lastFourDigits;
        }

        var phoneObs = valueAccessor();
        phoneObs(output);
    }
};

以下代码按预期工作。使用此方法的一个流程是 使用 backspace 删除 phone 号码。一旦它删除了最后四位数字并点击了 - 它就不能删除 - 也不能删除 ( ) 因为我正在动态添加 - 和 ( )根据长度。我可以使用箭头键或在这些符号前单击并开始删除，或者我可以突出显示文本框并一次删除所有内容。但我需要能够通过退格键删除符号或模拟并将其从代码中动态删除。

关于如何解决这个问题有什么建议吗？

更新

这是JSFIDDLE。 fiddle 我遇到的唯一问题是它不会在值更改时更新值。它只会在您按下回车键或离开文本框时更新。不确定我是否遗漏了其他任何东西...

我已更新我的逻辑以解决我遇到的问题，该问题已解决。但我注意到这两种逻辑都有一个问题。

如果我有一个 phone 号码

(123) 456-7890

如果我从区号中删除 1，光标不会停留在同一个位置（2 之前）。它移动到字符串的末尾，所有内容都向下移动一个数字。

if (areaCode.length <= 3 && nextThreeDigits == "") {
    output = "(" + areaCode;
} else if (areaCode.length == 3 && nextThreeDigits < 3) {
    output = "(" + areaCode + ")" + " " + nextThreeDigits;
} else if (areaCode.length == 3 && nextThreeDigits.length <= 3 && lastFourDigits.length == "") {
    output = "(" + areaCode + ")" + " " + nextThreeDigits;
} else if (areaCode.length == 3 && nextThreeDigits.length == 3 && lastFourDigits.length <= 4) {
  output = "(" + areaCode + ")" + " " + nextThreeDigits + "-" + lastFourDigits;
}

Answer 1

最简单的方法是在有足够的字符后添加标记，使光标始终接触到数字。因为文本字段添加了这些字符，所以每当您添加非数字字符时都会遇到该错误。例如，当您只有 3 个数字并尝试删除一个数字时，您提到的带有“-”的错误也会发生（它删除 space，然后将 space 添加回来）。例如：如果有 3 个数字，(123 并在他们输入第四个数字后添加 )。

另一种方法是将 input = input.replace(/[^0-9]/g, ''); 保存在元素的数据字段中，如果数字没有改变，则跳过整个输出阶段。例如：

input = input.replace(/[^0-9]/g, '');
if(element.phone == input){ return; }
element.phone = input;

Answer 2

如何使用输入掩码（jasny 有一个不错的http://www.jasny.net/bootstrap/）和自定义绑定。

这是我做的 fiddle。http://jsfiddle.net/vL59q8e1/2/

这里是绑定javascript

ko.bindingHandlers.inputmask = {
  init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
    ko.bindingHandlers.value.init(element, valueAccessor, allBindings);

     $(element).inputmask({
        mask: '(999) 999-9999'
        });
  },
  update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
    var value = valueAccessor();
      }
};

键入时格式化 phone 数字 (xxx) xxx - xxxx

Format phone number as you type (xxx) xxx - xxxx

javascript

regex

knockout.js

knockout-binding-handlers

更新