Input field will take only one decimal point

Question

I am using the following code to make field numeric only. Everything going fine, but it allows more than one decimal point.Experts please help..

$("#" + fieldId).keydown(function (e) {
        // Allow: backspace, delete, tab, escape, enter and .
        if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 190,110]) !== -1 ||
             // Allow: Ctrl+A
            (e.keyCode == 65 && e.ctrlKey === true) || 
             // Allow: home, end, left, right
            (e.keyCode >= 35 && e.keyCode <= 39)) {
                 // let it happen, don't do anything
                 return;
        }
        // Ensure that it is a number and stop the keypress
        if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
            e.preventDefault();
        }

    });

event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 190 if you want decimals. If you don't want decimal remove that. — Parth Trivedi, Dec 07 '15 at 08:36
I want decimal..But that will be only one..Hope you understand.. — Mak Reza, Dec 07 '15 at 08:38

score 0 · Answer 1 · edited May 23 '17 at 12:23

0

try something like (from here)

$('.number').keypress(function(event) {
  if ((event.which != 46 || $(this).val().indexOf('.') != -1) &&
    ((event.which < 48 || event.which > 57) &&
      (event.which != 0 && event.which != 8))) {
    event.preventDefault();
  }

  var text = $(this).val();

  if ((text.indexOf('.') != -1) &&
    (text.substring(text.indexOf('.')).length > 1) &&
    (event.which != 0 && event.which != 8) &&
    ($(this)[0].selectionStart >= text.length - 1)) {
    event.preventDefault();
  }
});

edited May 23 '17 at 12:23

Community

1
1

answered Dec 07 '15 at 08:33

gurvinder372

66,980
10
72
94

please do something in my code..Thanks for the response – Mak Reza Dec 07 '15 at 08:35
@MakReza your code lacks the check of using decimal only once. If you can create a fiddle I can make changes in your code, else try this one. – gurvinder372 Dec 07 '15 at 08:40
do something here.. if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) { e.preventDefault(); } – Mak Reza Dec 07 '15 at 08:40
@MakReza this code doesn't check if the decimal is input only once. Please be more precise in your comment. – gurvinder372 Dec 07 '15 at 08:42
@MakReza Yes, but your code doesn't ensure that or even check that. – gurvinder372 Dec 07 '15 at 08:52
@MakReza Can you try the code I have shared? Or else create a fiddle so that I can manipulate your code – gurvinder372 Dec 07 '15 at 09:23
yeah,i have tried the lower half of ur code..but didn't work...:( – Mak Reza Dec 07 '15 at 09:31

Parth Trivedi · Answer 2 · 2015-12-07T11:58:34.283

Number.prototype.countDecimals = function () {
    if(Math.floor(this.valueOf()) === this.valueOf()) return 0;
    return this.toString().split(".")[1].length || 0; 
}

Ex.

var x = 23.453453453;
x.countDecimals(); // 9

check count before event.preventDefault();

This may help you.

$("#" + fieldId).keydown(function (e) {
        // Allow: backspace, delete, tab, escape, enter and .
        if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 190,110]) !== -1 ||
             // Allow: Ctrl+A
            (e.keyCode == 65 && e.ctrlKey === true) || 
             // Allow: home, end, left, right
            (e.keyCode >= 35 && e.keyCode <= 39)) {
                 // let it happen, don't do anything
                 return;
        }
        // Ensure that it is a number and stop the keypress
        if ($("#" + fieldId).val().countDecimals() >=2  || (e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
            e.preventDefault();
        }

    });

$("#" + fieldId).val().countDecimals() this will give decimal points. If at any key press this value > or equal to 2 then we prevent that key to write. — Parth Trivedi, Dec 07 '15 at 12:00
Can you make console.log($("#" + fieldId).val().countDecimals() >=2). and check is it getting true/false after 2 decimal points. — Parth Trivedi, Dec 07 '15 at 12:01

Khalleo · Answer 3 · 2015-12-09T00:01:01.813

if your happy with your solution and you want just to allow one decimale you will have just add an extra line to check that, I use your code but I change keydown to keypress otherwise it wont work to catch the dot character, I added( ||($(this).val().split(".").length - 1 > 0 && String.fromCharCode(e.which) == '.') ) at the end of the code:

-the added code just check whether there is already a dot and if the pressed key is dot.

$("#" + fieldId).keypress(function (e) {
        // Allow: backspace, delete, tab, escape, enter and .
        if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 190,110]) !== -1 ||
             // Allow: Ctrl+A
            (e.keyCode == 65 && e.ctrlKey === true) || 
             // Allow: home, end, left, right
            (e.keyCode >= 35 && e.keyCode <= 39)) {
                 // let it happen, don't do anything
                 return;
        }
        // Ensure that it is a number and stop the keypress
        if ($("#" + fieldId).val().countDecimals() >=2  || (e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105 || ($(this).val().split(".").length - 1 > 0 && String.fromCharCode(e.which) == '.'))) {
            e.preventDefault();
        }

    });

your way of doening it wont prevent a user from pasting a invalid content you you can prevent user from dat with this code:
```
  $("#" + fieldId).bind('paste', function (e) 
  {
     e.preventDefault();
  });
```
I would advise you not to validate on kepress or keydown because of:
user can type a dot after the number and leave the input (like 88. => not valid) which your code wont prevent(and can not otherwise the user can not type a decimale number).
bij pressing many keys at the same time I was abel to get invalid characters in the input without preventing them.

-I would advise you to validate on blur so that the user get the freedom of editing and you can be sure of validating the real content of the input.

Input field will take only one decimal point

3 Answers3