1

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

(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。一旦它删除最后四位数字并点击-它就不能删除-也不，( )因为我是根据长度动态添加-和。( )我可以使用箭头键或在这些符号之前单击并开始删除，或者我可以突出显示文本框并一次删除所有内容。但我需要能够通过退格删除符号或动态模拟并从代码中删除它。

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

更新

这是JSFIDDLE。我对这个小提琴的唯一问题是它不会更新值变化的值。仅当您按输入或离开文本框时才会更新。不知道如果我错过了其他任何东西......

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

如果我有电话号码

(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;
}
4

2 回答 2

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();
      }
};
于 2016-11-24T01:48:08.417 回答
0

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

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

input = input.replace(/[^0-9]/g, '');
if(element.phone == input){ return; }
element.phone = input;
于 2016-11-23T20:22:42.517 回答