How to allow only numbers (even when copy-pasted) in input text field using jQuery?

Question

I am using this jQuery code to allow only numbers to be entered in input text field.

jQuery(document).ready(function() {     
    jQuery( '.only_numbers' ).keydown(function (e) {
        // Allow: backspace, delete, tab, escape, enter and .
        if (jQuery.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
             // Allow: Ctrl+A, Command+A
            ((e.keyCode === 65) && (e.ctrlKey === true || e.metaKey === true)) || 
             // Allow: home, end, left, right, down, up
            (e.keyCode >= 35 && e.keyCode <= 40)) {
                 // 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();
        }
    });
});

This works fine, except one small problem. It does not allow anything to be pasted in the field. How can I allow user to paste a string in the field, only if the string contains all numeric characters?

Also, it will be awesome if I could do the same for input text fields allowing only alphabets.

I don't want to use `type="number"` because of issues in browser compatibility, styling and making form fields sticky. — user1543784, Jun 15 '17 at 04:55
But it widely supported in all modern browsers. http://caniuse.com/#feat=input-number — Manish, Jun 15 '17 at 04:56
Check my updated answers it uses `type=text` for both type of validations and supports IE and firefox and other browsers as well. — Manish, Jun 15 '17 at 05:11
Possible duplicate of [How to allow only numeric (0-9) in HTML inputbox using jQuery?](https://stackoverflow.com/questions/995183/how-to-allow-only-numeric-0-9-in-html-inputbox-using-jquery) — emkey08, Jul 18 '19 at 08:28

Zze · Answer 1 · 2019-10-20T20:01:17.833

You can use regex to achieve this.

Numbers only.

function process(input){
  let value = input.value;
  let numbers = value.replace(/[^0-9]/g, "");
  input.value = numbers;
}

<input type="text" oninput="process(this)">

Letters only.

function process(input){
  let value = input.value;
  let letters = value.replace(/[0-9]/g, "");
  input.value = letters;
}

<input type="text" oninput="process(this)">

Saroj · Accepted Answer · 2020-07-29T11:11:11.757

12

Your HTML

 <input type='text' />

Your Jquery

 $('input').on('paste', function (event) {
  if (event.originalEvent.clipboardData.getData('Text').match(/[^\d]/)) {
    event.preventDefault();
  }
});

$("input").on("keypress",function(event){
                if(event.which < 48 || event.which >58){
                    return false;
                }
            });

Working codepen https://codepen.io/anon/pen/pwEXyg

edited Jul 29 '20 at 11:11

answered Jun 15 '17 at 04:38

Saroj

1,343
4
15
31

1

user1543784 check this codepen this is excatly doing what you need https://codepen.io/anon/pen/pwEXyg – Saroj Jun 15 '17 at 05:29
1

This is great! Now trying to work out how to alter this code to make it work for alphabets. Thanks! – user1543784 Jun 15 '17 at 05:34
1

Edit your answer to Include the code from the link, and I will accept it to be the solution. – user1543784 Jun 15 '17 at 05:39
1

little comment, on event keypress .which is <=47 || >=58, else doesnt not enter in the range 0 & 9, Regards! – Ckevyn Ovalle May 09 '19 at 16:56
@CkevynOvalle Changed mate. Thanks – Saroj Jul 29 '20 at 11:12

Manish · Answer 3 · 2017-06-15T05:57:14.053

Why are you making things so complicated. You can just make the input type='number' and that would serve your purpose you don't need jQuery for that. It wont allows alphabets except e for exponential numbers and when you copy paste to this it will just paste the numbers from the copied string to the textbox and e as well.

Also below is the code that will allow only alphabets in a textbox. And also the code that allows only numbers in a textbox of type=text.

function onlyAlphabets(event) {
  //allows only alphabets in a textbox
  if (event.type == "paste") {
    var clipboardData = event.clipboardData || window.clipboardData;
    var pastedData = clipboardData.getData('Text');
    if (isNaN(pastedData)) {
      return;

    } else {
      event.prevetDefault();
    }
  }
  var charCode = event.which;
  if (!(charCode >= 65 && charCode <= 120) && (charCode != 32 && charCode != 0) && charCode != 8 && (event.keyCode >= 96 && event.keyCode <= 105)) {
    event.preventDefault();
  }
}

function onlyNumbers(event) {
  if (event.type == "paste") {
    var clipboardData = event.clipboardData || window.clipboardData;
    var pastedData = clipboardData.getData('Text');
    if (isNaN(pastedData)) {
      event.preventDefault();

    } else {
      return;
    }
  }
  var keyCode = event.keyCode || event.which;
  if (keyCode >= 96 && keyCode <= 105) {
    // Numpad keys
    keyCode -= 48;
  }
  var charValue = String.fromCharCode(keyCode);
  if (isNaN(parseInt(charValue)) && event.keyCode != 8) {
    event.preventDefault();
  }
}

Number Only With Type=Number:
<input type="number" name="quantity" min="1" max="5">
<br> Number Only With Type=Text:
<input type="text" name="quantity" min="1" max="5" onkeydown="onlyNumbers(event)" onpaste="onlyNumbers(event)">
<br>Aplhabets Only:
<input type="text" onkeydown="onlyAlphabets(event)" onpaste="onlyAlphabets(event)"/>

Update

Added code to allow only numbers in an input of type=text. And also will work in Firefox and IE as well

Hope it helps :)

Works now, except you will have to edit this again to reflect the change because now you aren't using `type=''number'` anymore. — Zze, Jun 15 '17 at 05:12
Manish read the question. he is asking this solution with copy paste also. — Saroj, Jun 15 '17 at 05:17
"Numbers Only" (type:text) field doesn't take numbers from numpad, and "Alphabets Only" field takes numbers from numpad! Also, the former one doesn't allow pasting data, while later one does. — user1543784, Jun 15 '17 at 05:17

score 2 · Answer 4 · answered Jun 15 '17 at 04:41

2

If, you wanted to do it by skipping the JS you could just set your input type="number". Though it does not work for alphabet...

answered Jun 15 '17 at 04:41

Icewine

1,851
1
12
22

score 2 · Answer 5 · answered Jun 15 '17 at 05:19

2

Try this, it will restrict typing alphabets and won't let you paste it either.

$(document).ready(function(){
    $("#test").on("keypress",function(event){
        if(event.which <= 48 || event.which >=57){
            event.preventDefault();
        }
    });
    
    $("#test").on("change",function(event){
        $value = $("#test").val();
        if(isNaN($value)){
          $("#test").val('');
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="test">

answered Jun 15 '17 at 05:19

Rudraksh Pathak

888
8
20

Oh yes! Now only if I could get the exact same functionality for alphabets - should be able to type (both small and capital) and paste, but prevent anything else. – user1543784 Jun 15 '17 at 05:23
Will `if(event.which <= 65 || event.which >=90)` work? – user1543784 Jun 15 '17 at 05:27

score 0 · Answer 6 · answered Jun 15 '17 at 11:09

0

Here is my solution which is faster than JS.

<input type="text" pattern="[\d+\t.]+" formnovalidate="false"/>

answered Jun 15 '17 at 11:09

Kenneth Tobias

1
2

score 0 · Answer 7 · answered Jun 15 '17 at 11:10

0

Actually, you only need a "pattern" attribute.

<input type="text" pattern="[\d\t.]+" formnovalidate="false "/>

answered Jun 15 '17 at 11:10

Kenneth Tobias

1
2

How do I delete this excess answer? – Kenneth Tobias Jun 15 '17 at 11:13
click 'delete' under the answer in grey letters while logged in. – Icewine Jun 16 '17 at 01:23
@Icewine where? I am on android – Kenneth Tobias Jun 16 '17 at 04:02

score 0 · Answer 8 · answered Jul 06 '17 at 05:55

Restrict other keys using keyboard event

//numbers, delete, backspace, arrows        
var validKeyCodes = [8, 9, 37, 38, 39, 40, 46, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57];
        $("Selectors").on("keydown", function (e) {
            if (!($.inarray(e.keycode, validkeycodes) >= 0))
                e.preventDefault();
        });

How to allow only numbers (even when copy-pasted) in input text field using jQuery?

8 Answers8

Linked