How do I prevent my decimals to be erased in Jquery?

141 views Asked by At

So I am working on a form and a have a field where I should allow 5 decimals after the decimal separator. However I also had to make this work on .focus() and . blur() events and it works. But when I click elsewere to have my value formatted as I wanted in my input field, from my 5 decimals my last 2 are removed. Ex: I enter 78676,56569, re returns 78.676,565 How can I change the code to make it not remove my last 2 decimals? Here is what I have :

  function fiveDecimals(event) {
                var $txtBox = $(this);
                var key = window.event ? event.keyCode : event.which;
                if (event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 37 || event.keyCode == 39) {
                    return true;
                } else if ( key < 44 || key > 57 && event.keyCode != 44) {
                    event.preventDefault();
                }else {
                var len = $txtBox.val().length;
                var index = $txtBox.val().indexOf(',');

                if (index > 0 && event.keyCode == 44) {
                return false;
                } //prevent if already comma
                if (index > 0) {
                var charAfterdot = (len + 1) - index;
                //allows only 5 decimals
                if (charAfterdot > 6) {
                    return false;
                }
            }
        }
                    return $txtBox;
                };      
                    var
            dec_separator = (0.1).toLocaleString().substr(1,1), // Get decimal separator
            dec_xsanitize = new RegExp('[' + dec_separator + ']', 'g'), // Get thousands separator
            tho_separator = (1000).toLocaleString().substr(1,1),
            tho_xcleaner = new RegExp('[' + tho_separator + ']', 'g');
        $('#float2')
            .on("focus", function ()
                {
                this.value = this.value.replace( tho_xcleaner, '' );
                })
            .on("blur", function ()
                {// Clean thousands separator and change decimal separator  
                var number = parseFloat(this.value.replace( tho_xcleaner, '' ).replace( dec_xsanitize, '.' ));
                    this.value = isNaN(number) ? '0': number.toLocaleString();
                }); 

Here is the Jsfiddle : http://jsfiddle.net/Daria90/zuxu5tva/

Notice that my decimals separator is set on DE system, so on English keyboards it´s probably a period and the keyCode is 46. Mine was 44.

1

There are 1 answers

3
Abhinav On

All you need to include was $(this).val(number); in your blur function

        $('#float2')
            .on("focus", function ()
                {
                this.value = this.value.replace( tho_xcleaner, '' );
                })
            .on("blur", function ()
                {// Clean thousands separator and change decimal separator  
                var number = parseFloat(this.value.replace( tho_xcleaner, '' ).replace( dec_xsanitize, '.' ));
                    this.value = isNaN(number) ? '0': number.toLocaleString();
                  $(this).val(number);
                });             

check out the Fiddle link