jquery only allow input float number

Question

i\'m making some input mask that allows only float number. But current problem is I can\'t check if multiple dots entered. Can you check those dots and prevent it for me?

Answer 1

Using jQuery and allowing negative floats :

// Force floats in '.js_floats_only' inputs
$(document).ready(function() {
    $('.js_floats_only').each(function() {
        // Store starting value in data-value attribute.
        $(this).data('value', this.value);
    });
});

$(document).on('keyup', '.js_floats_only', function() {
    var val = this.value;
    if ( val == '-' ) {
        // Allow starting with '-' symbol.
        return;
    } else {
        if ( isNaN(val) ) {
            // If value is not a number put back previous valid value.
            this.value = $(this).data('value');
        } else {
            // Value is valid, store it inside data-value attribute.
            $(this).data('value', val);
        }
    }
});

Answer 2

I found this way to do this,

$.validator.addMethod("currency", function (value, element) {
  return this.optional(element) || /^\$(\d{1,3}(\,\d{3})*|(\d+))(\.\d{2})?$/.test(value);
}, "Please specify a valid amount");

https://gist.github.com/jonkemp/9094324

Answer 3

HTML

<input type="text"  onkeypress="return isFloatNumber(this,event)" />

Javascript

function isFloatNumber(item,evt) {
    evt = (evt) ? evt : window.event;
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode==46)
    {
        var regex = new RegExp(/\./g)
        var count = $(item).val().match(regex).length;
        if (count > 1)
        {
            return false;
        }
    }
    if (charCode > 31 && (charCode < 48 || charCode > 57)) {
        return false;
    }
    return true;
}

jsfiddle.net

Answer 4

Good for integer and float values. Plus, copy/paste clipboard event.

var el = $('input[name="numeric"]');
el.prop("autocomplete",false); // remove autocomplete (optional)
el.on('keydown',function(e){
	var allowedKeyCodesArr = [9,96,97,98,99,100,101,102,103,104,105,48,49,50,51,52,53,54,55,56,57,8,37,39,109,189,46,110,190];  // allowed keys
	if($.inArray(e.keyCode,allowedKeyCodesArr) === -1 && (e.keyCode != 17 && e.keyCode != 86)){  // if event key is not in array and its not Ctrl+V (paste) return false;
		e.preventDefault();
	} else if($.trim($(this).val()).indexOf('.') > -1 && $.inArray(e.keyCode,[110,190]) != -1){  // if float decimal exists and key is not backspace return fasle;
		e.preventDefault();
	} else {
		return true;
	};  
}).on('paste',function(e){  // on paste
	var pastedTxt = e.originalEvent.clipboardData.getData('Text').replace(/[^0-9.]/g, '');  // get event text and filter out letter characters
	if($.isNumeric(pastedTxt)){  // if filtered value is numeric
		e.originalEvent.target.value = pastedTxt;
		e.preventDefault();
	} else {  // else 
		e.originalEvent.target.value = ""; // replace input with blank (optional)
		e.preventDefault();  // retur false
	};
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" name="numeric" value="" placeholder="insert value">

[2017-10-31] Vanilla.js

let el = document.querySelector('input[name="numeric"]');
el.addEventListener('keypress',(event) => {
  let k = event.key,
      t = isNaN(k),
      sc = ['Backspace'].indexOf(k) === -1,
      d = k === '.',dV = el.value.indexOf('.') > -1,
      m = k === '-',mV = el.value.length > 0;

      if((t && sc) && ((d && dV) || (m && dV) || (m && mV) || ((t && !d) && (t && !m)))){event.preventDefault();}
},false);
el.addEventListener('paste',(event) => {
    if(event.clipboardData.types.indexOf('text/html') > -1){
        if(isNaN(event.clipboardData.getData('text'))){event.preventDefault();}
    }
},false);

<input type="text" name="numeric">

Answer 5

Using JQuery.

$(document).ready(function()
     {
        //Only number and one dot
        function onlyDecimal(element, decimals)
        {
            $(element).keypress(function(event)
            {
                num = $(this).val() ;
                num = isNaN(num) || num === '' || num === null ? 0.00 : num ;
                if ((event.which != 46 || $(this).val().indexOf('.') != -1) && (event.which < 48 || event.which > 57))
                {
                    event.preventDefault();

                }
                if($(this).val() == parseFloat(num).toFixed(decimals))
                {
                    event.preventDefault();
                }
            });
        }

         onlyDecimal("#TextBox1", 3) ;



    });

Answer 6

Your code seems quite fine but overcomplicated.

First, it is $(this).val().indexOf, because you want to do something with the value.

Second, the event.which == 46 check is inside an if clause that's only passed when event.which != 46, which can never be true.

I ended up with this which works: http://jsfiddle.net/VRa6n/3/.

$('.number').keypress(function(event) {
    if(event.which < 46
    || event.which > 59) {
        event.preventDefault();
    } // prevent if not number/dot

    if(event.which == 46
    && $(this).val().indexOf('.') != -1) {
        event.preventDefault();
    } // prevent if already dot
});