Question

我想问你是否有可能动态输入值格式？
因此，当我输入某个值时，它会动态添加逗号来格式化货币例如，我写了1234，它将被动态格式化为1＆＃234; 234 如果我删除一个号码，它将被改为123 我正在考虑一些自定义绑定。但是，是否可以为每次更改添加规则？

啦啦队

Answer 1

您可以使用bindinghandler来创建自定义绑定：

ko.bindingHandlers.numeric = {
    update: function(element, valueAccessor, allBindingsAccessor) {
       var value = ko.utils.unwrapObservable(valueAccessor());
       var positions= ko.utils.unwrapObservable(allBindingsAccessor().positions) || ko.bindingHandlers.numeric.defaultPositions;
       var formattedValue = parseFloat(value).toFixed(positions); 
       var finalFormatted = ko.bindingHandlers.numeric.withCommas(formattedValue);  

        ko.bindingHandlers.text.update(element, function() { return finalFormatted; });
    },
    defaultPositions: 2,
    withCommas: function(original){
       original+= '';
        x = original.split('.');
        x1 = x[0];
        x2 = x.length > 1 ? ',' + x[1] : '';
        var rgx = /(\d+)(\d{3})/;
        while (rgx.test(x1)) {
            x1 = x1.replace(rgx, '$1' + '.' + '$2');
        }
        return x1 + x2;      
    } 
};

然后，如果将值绑定到元素，则只使用此绑定而不是正常的text绑定：

<span data-bind="numeric: myNumericObservable"></span>

上面的自定义绑定处理程序将值格式化为德语值：1.202,22但您可以通过替换＆＃39;来轻松更改它。和＆＃39;，＆＃39;。

顺便说一下，这是input - 数据值绑定的解决方案 - 标签：

ko.bindingHandlers.numericValue = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        ko.utils.registerEventHandler(element, 'change', function (event) {
            var observable = valueAccessor();
            var positions= ko.utils.unwrapObservable(allBindingsAccessor().positions) || ko.bindingHandlers.numericValue.defaultPositions;      

            if(ko.utils.unwrapObservable(allBindingsAccessor().positions)==0){
                positions=0;
            }

            if(isNaN(parseFloat($(element).val())))
                observable(0);
            else {
                if(!ko.utils.unwrapObservable(allBindingsAccessor().noDecimalPoints))
                    observable(parseFloat($(element).val().replace(".","").replace(",",".")).toFixed(positions).replace(",","."));
                else 
                    observable(parseFloat($(element).val().replace(".","").replace(",",".")).toFixed(positions));
            }
        });
    },
    update: function(element, valueAccessor, allBindingsAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        if(value!=null) {
            var positions= ko.utils.unwrapObservable(allBindingsAccessor().positions) || ko.bindingHandlers.numericValue.defaultPositions;      
            if(ko.utils.unwrapObservable(allBindingsAccessor().positions)==0){
                positions=0;
            }
            var formattedValue = parseFloat(value).toFixed(positions); 
            var finalFormatted  = formattedValue;
            if(!ko.utils.unwrapObservable(allBindingsAccessor().noDecimalPoints))
                finalFormatted = ko.bindingHandlers.numericValue.withCommas(formattedValue); 
            ko.bindingHandlers.value.update(element, function() { return finalFormatted; });
        }
    },
    defaultPositions: 2,
    noDecimalPoints:false,
    withCommas: function(original){
       original+= '';
        x = original.split('.');
        x1 = x[0];
        x2 = x.length > 1 ? ',' + x[1] : '';
        var rgx = /(\d+)(\d{3})/;
        while (rgx.test(x1)) {
            x1 = x1.replace(rgx, '$1' + '.' + '$2');
        }
        return x1 + x2;      
    } 
};

您可以按如下方式使用：

<input tabindex="10" data-bind="numericValue: myNumericObservable">

您也可以配置它：

<input data-bind="numericValue: myNumericObservable, positions: 0, noDecimalPoints: true">

Answer 2

我已经写了我需要的东西：）

这是我的工作JSFiddle

我的代码：

function TestViewModel() {
  var self = this;
  self.myCurrency = ko.observable();
}

ko.bindingHandlers.currencyFormat = {
  init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
    ko.utils.registerEventHandler(element, 'keyup', function (event) {
        var observable = valueAccessor();
        observable(formatInput(element.value));
        observable.notifySubscribers(5);
    });
  },
  update: function (element, valueAccessor, allBindingsAccessor) {
    var value = ko.utils.unwrapObservable(valueAccessor());
    $(element).val(value);
  }
};

function formatInput(value) {
  value += '';

  value = value.replace(/,/g, '');
  var rgx = /(\d+)(\d{3})/;
  while (rgx.test(value)) {
    value = value.replace(rgx, '$1' + ',' + '$2');
  }

  return value;
}

$(document).ready(function () {
  ko.applyBindings(new TestViewModel());
});

享受它

输入字段上的动态货币格式

2 个答案: