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

Question

我想问你是否可以格式化动态输入值？
因此,当我输入一些值时,它将动态添加逗号以格式化货币.
例如,我正在编写1234,它将被动态格式化为1'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但您可以通过替换"."来轻松更改它.和','.

顺便说一句,这是input-tags中数值绑定的解决方案:

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">