JSFiddle - React, Tailwind, and code Playground

by gbos

HTML

<input type="text" data-bind="value: num1, valueUpdate: 'keyup'" />
<input type="text" data-bind="value: num2, valueUpdate: 'keyup'" />
<input type="text" data-bind="value: total" />

JavaScript

ko.extenders.commaToPoint = function(target) {
  var result = ko.computed({
    read: function() {
      return target();
    },
    write: function(v) {
      target(v.replace(/\,/g, '.'));
    }
  });
  return result;
};


var viewModel = {
  num1: ko.observable(0).extend({
    commaToPoint: ''
  }),
  num2: ko.observable(0).extend({
    commaToPoint: ''
  })
};

viewModel.total = ko.computed(function() {
  return parseFloat(viewModel.num1()) + parseFloat(viewModel.num2());
}, viewModel);

ko.applyBindings(viewModel);