0

我们的用户在输入字段中输入值时开始注意到一些奇怪的行为。如果他们输入 12000，它会通过 observable 上的扩展器格式化为 12,000。如果他们将光标移到逗号后面并删除第一个 0 以尝试将 500 添加到数字上，则光标将移动到数字的末尾，结果为 12,005。

重要的是我们使用 valueUpdate:'afterkeydown' 来保持模型在键入时同步。

有没有更好（正确）的方法来处理这个问题？

var ViewModel = function() {
this.numberOne = ko.observable(0).extend({ formattedNumeric: null });
this.numberTwo = ko.observable(0).extend({ formattedNumeric: null });
this.addThem = ko.computed(function() {
    return this.numberOne.raw() + this.numberTwo.raw();
}, this).extend({ formattedNumeric: null });

};

http://jsfiddle.net/eHjVV/2/

4

1 回答 1

0

您需要限制添加逗号的计算，这里是更新的 jsfiddle http://jsfiddle.net/dhanasekaran/eHjVV/4/

ko.extenders.formattedNumeric = function (target) {
    function addCommas(numberString) {
      numberString += '';
      var x = numberString.split('.'),
          x1 = x[0],
          x2 = x.length > 1 ? '.' + x[1] : '',
          rgxp = /(\d+)(\d{3})/;

      while (rgxp.test(x1)) {
        x1 = x1.replace(rgxp, '$1' + ',' + '$2');
      }

      return x1 + x2;
    }

    var result = ko.computed({
        read: function () {
            return addCommas(target());
        },
        write: function (newValue) {
            if ((typeof newValue) === 'string') {
                var num = newValue.replace(/[^0-9\.]+/g, '');
                newValue = parseFloat(num);
            }

            if (newValue > 0) {
                target(newValue);
            }
        }
    }).extend({throttle: 500});

    result.raw = target;

    result(target());

    return result;
};

除非用户停止输入至少 500 毫秒，否则这里不会发生逗号计算。您应调整时间以适应同步速度的需要。

于 2013-09-30T18:20:48.343 回答