JSFiddle - React, Tailwind, and code Playground

by jansian

HTML

<table>
    <TR>
        <TD class=formborder>$50 Livewire Vouchers</TD>
        <TD class=formborder vAlign=top>
             <SPAN class=lblQuantityCSS>480 PDs</SPAN>
        </TD>
        <TD>
            <INPUT class=txtUnitPriceCSS value="" type="text"/> 
        </TD>
    </TR>
</table>

JavaScript

//to get the caret position
        (function ($) {
            $.fn.getCursorPosition = function () {
                var input = this.get(0);
                if (!input) return; // No (input) element found
                if ('selectionStart' in input) {
                    // Standard-compliant browsers
                    return input.selectionStart;
                } else if (document.selection) {
                    // IE
                    input.focus();
                    var sel = document.selection.createRange();
                    var selLen = document.selection.createRange().text.length;
                    sel.moveStart('character', -input.value.length);
                    return sel.text.length - selLen;
                }
            }
        })(jQuery);

        /// Added By: Ian Jasper Bardoquillo
        /// Date: 30Jan2013 11:30AM
        /// To take control on the user's input on the form and
        /// for easier maintainance in the future
        $('.txtUnitPriceCSS').keypress(function (event) {
            var blnKeyIsValid = true;
            var intCaret = $(this).getCursorPosition();
            var intLength = $(this).val().length;
            var intMaxDecimalPlaces = 2;

            if ((event.which != 46 || $(this).val().indexOf('.') != -1) && (event.which < 48 || event.which > 57) && event.which != 8 && event.which !== 0) {
                blnKeyIsValid = false;
                //alert("prevent");
                event.preventDefault();
            }

            if ($(this).val().indexOf('.') > 0 && blnKeyIsValid) {
                var intDotIndex = $(this).val().indexOf('.');
                var arrValue = $(this).val().split('.');
                var digitLength = arrValue.length > 1 ? arrValue[1].length : 0;


                var blnAllowedKeys = event.which == 8 || event.which == 0;
                if (intCaret - 1 >= intDotIndex && digitLength >= intMaxDecimalPlaces && !blnAllowedKeys) {

                   ...