JSFiddle - React, Tailwind, and code Playground

by manoj

HTML

<script src="http://knockoutjs.com/downloads/knockout-3.1.0.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/numeral.js/1.4.5/numeral.min.js"></script>
<input data-bind="formatMoney: testVal">
    <input data-bind="formatMoney: testVal2">
        <input data-bind="formatMoney: total">

CSS

input {
    padding: 8px;
    font-size: 14px;
}

JavaScript

$(document).on("focus", "input:text", null, function (ev) {
        $(this).select(); 
        return this;
    });
     
    $(document).on("mouseup", "input:text", null, function (e) {
        e.preventDefault(); 
    });

ko.bindingHandlers.formatMoney = {
	init: function(element, valueAccessor) {
		var value = valueAccessor();
		var interceptor = ko.computed({
			read: function() {
               if(ko.unwrap(value) === undefined )
               {
                     value("0");
               }
                return numeral(ko.unwrap(value)).format('0,0.00');
			},
			write: function(newValue) {
                
                if($.trim(newValue) == '')
                    value("0");
                else
                    value(numeral().unformat(newValue));
                value.valueHasMutated();
			}
		}).extend({ notify: 'always' });
        
		if(element.tagName.toLowerCase() == 'input' )
			ko.applyBindingsToNode(element, {
                value: interceptor
			});
		else
			ko.applyBindingsToNode(element, {
				text: interceptor
			});
	}
}

function viewModel () {
    var self = this;
     self.testVal = ko.observable();
       self.testVal2 = ko.observable();
    self.total = ko.computed(function () {
   return  parseFloat(self.testVal()) + parseFloat(self.testVal2());
    });
}

ko.applyBindings(new viewModel());