jQuery do not allow alphabets to be entered in input field

Question

My requirement is to not allow user to type in any Alphabets. The below code allows 1 character to be entered even though I have provided the e.preventDefault() method on both keydown and keyup methods.

$(function() {
  // Regular Expression to Check for Alphabets.
  var regExp = new RegExp('[a-zA-Z]');

  $('#test').on('keydown keyup', function(e) {

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

    // Do not allow alphabets to be entered.
    if (regExp.test(value)) {
      e.preventDefault();
      return false;
    }

  }); // End of 'keydown keyup' method.

}); // End of 'document ready'

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" id="test" name="test" />

What am I doing wrong? Is there some other way to get this done?

Make sure to validate your field before using its value. You can still enter an alphabetic character in that field. — Sebastian Simon, Sep 10 '15 at 06:53
You have a very loose concept of _alphabetic characters_. If you're limited to **basic latin** characters then yes, it works. However if an Italian, French, German or anyone else will type "à" then your code won't stop him to do it. Instead it'll stop everyone who uses an IME where a single (non _alphabetic_) character is made by two Unicode code points... — Adriano Repetti, Sep 10 '15 at 06:56
@AdrianoRepetti, Yes I will have to change my Regular Expression to allow only numbers rather than NOT allow alphabets. — LearningDeveloper, Sep 10 '15 at 07:01
@GauthamPJ don't forget that also _digit_ is a wide concept (2, ٢, ۲, 二, 兩 and 两 are all the same digit but in different alphabets; 2nd and 3rd are different even if look the same). If you need to support only Arabic numbers then yes, go with a simple regex. — Adriano Repetti, Sep 10 '15 at 07:31

Sebastian Simon · Accepted Answer · 2015-09-10T10:25:37.363

Replace

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

by

var value = String.fromCharCode(e.which) || e.key;

After all, you need to check which key has been pressed before allowing a character to be typed into the field.

Also, make sure the backspace and delete buttons and arrow keys aren’t blocked!

$(function() {
  var regExp = /[a-z]/i;
  $('#test').on('keydown keyup', function(e) {
    var value = String.fromCharCode(e.which) || e.key;

    // No letters
    if (regExp.test(value)) {
      e.preventDefault();
      return false;
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" id="test" name="test" />

If your goal is to only accept numbers, dots and commas use this function instead:

$(function() {
  var regExp = /[0-9\.\,]/;
  $('#test').on('keydown keyup', function(e) {
    var value = String.fromCharCode(e.which) || e.key;
    console.log(e);
    // Only numbers, dots and commas
    if (!regExp.test(value)
      && e.which != 188 // ,
      && e.which != 190 // .
      && e.which != 8   // backspace
      && e.which != 46  // delete
      && (e.which < 37  // arrow keys
        || e.which > 40)) {
          e.preventDefault();
          return false;
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" id="test" name="test" />

I actually need `numbers`, `comma` `,` and `dot` `.` character. But the `String.fromCharCode()` does not return `,` and `.` characters properly. Is there a way to validate these characters? — LearningDeveloper, Sep 10 '15 at 07:22
@GauthamPJ Do you need to block or accept numbers, dots and commas? — Sebastian Simon, Sep 10 '15 at 08:05
I need to Accept only Numbers, Dot and Comma. I used an array of required character codes to check for validity. Got it working properly. Thanks again. — LearningDeveloper, Sep 10 '15 at 09:59
@GauthamPJ I’ve edited my answer. Now both cases should be covered. — Sebastian Simon, Sep 10 '15 at 10:26

score 1 · Answer 2 · answered Sep 10 '15 at 06:53

You need to store input data somewhere and update it each time user inputs allowed character or reset when disabled

$(function() {
// Regular Expression to Check for Alphabets.
var regExp = new RegExp('[a-zA-Z]'),
    inputVal = '';

$('#test').on('keydown keyup', function(e) {

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

    // Do not allow alphabets to be entered.
    if (regExp.test(value)) {
        $(this).val(inputVal)
    }
    else{ 
        inputVal = value
    }

}); // End of 'keydown keyup' method.

}); // End of 'document ready'

Thanks for the solution, but @Xufox has provided a better answer. — LearningDeveloper, Sep 10 '15 at 07:03

score 1 · Answer 3 · answered May 14 '18 at 03:50

1

Create a function that will mask it out

jsfiddle

$.fn.noMask = function(regex) { 
  this.on("keypress", function(e) {
    if (regex.test(String.fromCharCode(e.which))) {
        return false;
    }
  });
}

$("input").noMask ( /[a-zA-Z]/ );

answered May 14 '18 at 03:50

Yevgeniy Afanasyev

37,872
26
173
191

Rifatul Islam Chowdhury · Answer 4 · 2019-01-10T05:26:07.337

0

If you are trying for only alphabet with space you can try it:

$("#test").on("keypress keyup blur",function (event) { 

 $(this).val($(this).val().replace(/[^a-zA-Z ]/, ""));

if (!((event.charCode > 64 && 
    event.charCode < 91) || event.charCode ==32 || (event.charCode > 96 && 
      event.charCode < 123))) {
      event.preventDefault();
    }
 });

edited Jan 10 '19 at 05:26

answered Jan 10 '19 at 05:16

Rifatul Islam Chowdhury

21
3

score 0 · Answer 5 · answered May 24 '19 at 07:56

This code will allow only numbers to be accepted for example in a telepone number input field. This is the improvement on the accepted answer.

var regExp = /[0-9]/;
      $("#test").on('keydown keyup blur focus', function(e) {

        var value =e.key;
        /*var ascii=value.charCodeAt(0);
        $('textarea').append(ascii);
        $('textarea').append(value);
        console.log(e);*/
        // Only numbers
        if (!regExp.test(value)
          && e.which != 8   // backspace
          && e.which != 46  // delete
          && (e.which < 37  // arrow keys
            || e.which > 40)) {
              e.preventDefault();
              return false;
        }
      });

jQuery do not allow alphabets to be entered in input field

5 Answers5