更新

Question

我正在bindingHandler中编写自定义knockout，以便在键入时按以下格式格式化（美国）电话号码。

（xxx）xxx - xxxx

HTML code ...

 <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 删除电话号码。删除最后四位数并点击-后，由于我正在动态添加-和( )，因此无法删除-或( )根据长度。我可以使用箭头键或在这些符号前单击并开始删除，或者我可以突出显示文本框并立即删除所有符号。但我需要能够通过退格删除符号或模拟并动态地从代码中删除它。

有关如何解决此问题的任何建议？

更新

这是JSFIDDLE。我对这个小提琴唯一的问题是它没有更新价值变化的价值。只有按Enter键或离开文本框才会更新。不确定如果我错过了其他任何东西......

我已经更新了我的逻辑以解决我遇到的问题，这是固定的。但我注意到这两个逻辑还有一个问题。

如果我有电话号码

（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

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

这是我做过的小提琴。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();
      }
};

Answer 2

简单的方法是在有足够的字符后添加标记，使光标始终触及数字。由于文本字段会添加这些字符，因此每当您添加非数字字符时都会出现该错误。例如，当您只有3个数字并尝试删除一个数字时，您提到的“ - ”错误也会发生（它会删除空格，然后再添加空格）。例如：如果输入了3个数字(123并且在第四个数字后输入了它们。

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

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

键入时格式化电话号码（xxx）xxx - xxxx

更新

2 个答案: