我想问你是否可以动态格式化输入值?
所以当我输入一些值时,它会动态添加逗号来格式化货币。
例如,我正在编写 1234,它将动态格式化为 1'234。
如果我删除一个数字,它将更改为 123。
我正在考虑一些自定义绑定(bind)。但是是否可以为每次更改添加规则?

欢呼

最佳答案

您可以为此使用 bindinghandler 并创建自定义绑定(bind):

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

然后,如果将值绑定(bind)到元素,则只需使用此绑定(bind)而不是普通的 text 绑定(bind):
<span data-bind="numeric: myNumericObservable"></span>

上面的自定义绑定(bind)处理程序将值格式化为德语值: 1.202,22 但是您可以通过替换 '.' 轻松更改它。和“,”。

顺便说一下,这是 input -tags 中数值绑定(bind)的解决方案:
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">

关于knockout.js - 输入字段上的动态货币格式,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/25856292/

10-12 12:18
查看更多