Geek Answers Handbook

Dynamic currency format in input field

I would like to ask you whether it is possible to format a dynamically entered value?
Therefore, when I enter some kind of value, it will dynamically add commas to format the currency.
For example, I am writing 1234 and it will be formatted to 1'234 dynamically.
If I delete one number, it will be changed to 123.
I am thinking of some user bindings. But is it possible to add a rule for each change?

Greetings

+4
source share
2 answers

I already write what I need :)

Here is my working JSFiddle

And my code is:

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

Enjoy it

+1
source

bindhandler :

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

More articles:


All Articles