Question

在输入字段中输入值时，我们的用户开始注意到一些奇怪的行为。如果他们输入12000，则通过观察者的扩展器将其格式化为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/

Answer 1

你需要限制添加逗号的计算器，这里是更新的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毫秒，否则不会发生逗号计算。您应该调整时间来满足同步速度的需要。

knockout JS格式化的数字游标行为

1 个答案: