JSFiddle - React, Tailwind, and code Playground

by opeta

HTML

<div class="control-group">
                        <label for="precoCompra" class="control-label">Preço de Compra<span class="required">*</span></label>
                        <div class="controls">
                            <input id="precoCompra" class="money" type="text" name="precoCompra" value=""  />
                        </div>
                    </div>
					<div class="control-group">
                        <label for="custoempresa" class="control-label">Custo Empresa<span class="required">*</span></label>
                        <div class="controls">
                            <input id="custoempresa" type="text" name="custoempresa" value=""  />
                        </div>
                    </div>
					<div class="control-group">
                        <label for="st" class="control-label">Subs. Tributária<span class="required">*</span></label>
                        <div class="controls">
                            <input id="st" type="text" name="st" value=""  />
                        </div>
                    </div>
					<div class="control-group">
                        <label for="ipi" class="control-label">IPI<span class="required">*</span></label>
                        <div class="controls">
                            <input id="ipi" type="text" name="ipi" value=""  />
                        </div>
                    </div>
                    <div class="control-group">
                        <label for="precoVenda" class="control-label">Preço de Venda<span class="required">*</span></label>
                        <div class="controls">
                            <input id="precoVenda" class="money" type="text" name="precoVenda" value=""  />
                        </div>
                    </div>

JavaScript

(function($) {
	$.fn.maskMoney = function(settings) {
		settings = $.extend({
			symbol:'R$',
			decimal:'.',
			precision:2,
			thousands:'',
			allowZero:true,
			showSymbol:false
		}, settings);

		settings.symbol=settings.symbol+' ';

		return this.each(function() {
			var input = $(this);

			function keypressEvent(e) {
				e = e||window.event;
				var k = e.charCode||e.keyCode||e.which;
				if (k == undefined) return; //needed to handle an IE "special" event

				if (k==8) { // tecla backspace
					preventDefault(e);
					var x = input.val().substring(0,input.val().length-1);
					input.val(maskValue(x));
					return false;
				} else if (k==9) { // tecla tab
					return true;
				}
				if (k<48||k>57) {
					preventDefault(e);
					return true;
				} else if (input.val().length==input.attr('maxlength')) {
					return false;
				}

				var key = String.fromCharCode(k);  // Valor para o código da Chave
				preventDefault(e);
				input.val(maskValue(input.val()+key));
			}

			function focusEvent(e) {
				if (input.val()=='') {
					input.val(setSymbol(getDefaultMask()));
				} else {
					input.val(setSymbol(input.val()));
				}
                if (this.createTextRange) {
                    var textRange = this.createTextRange();
                    textRange.collapse(false); // posiciona cursor no final.
                    textRange.select();
                }
			}

			function blurEvent(e) {
                if ($.browser.msie) {
                    keypressEvent(e);
                }

				if (input.val()==setSymbol(getDefaultMask())) {
					if(!settings.allowZero) input.val('');
				} else {
					input.val(input.val().replace(settings.symbol,''));
				}
			}

			function preventDefault(e) {
				if (e.preventDefault) { //standart browsers
					e.preventDefault();
				} else { // internet explorer
					e.returnValue = false
				}
			}

			function maskValue(v) {
				v = v.replace(settings.symbol,'');

				var strCheck = '0123456789';
				var len =...