Prevent numeric input in a text field using Javascript or jQuery

Question

I have requirement to avoid numeric input in a text type input field. My application is used only in devices like iPhone and Android.

For which I tried using the below code:

$("#custName-info").keypress(function (event) {
            alert(event.charCode);
            var inputValue = event.charCode;
            if (!(inputValue >= 65 && inputValue <= 120) && (inputValue != 32 && inputValue != 0)) {
                event.preventDefault();
            }
        });

JSFIddle

Here, the code works perfectly fine with iPhone but it doesn't work in Android devices. on investigating it, I found below information:

1. keypress is deprecated and hence should be avoided to be used. But if that is the reason, why is it working with my iPhone or on Chrome device emulator?
2. People have suggested to use either of the three below substitute event:keyup, keydown, input, change
3. I further found that the any of these 3 events doesnt work for me in devices because they do not give me charCode to identify the numeric inputs.
4. There was something on keyCode but then I couldnt understand what is the difference in charCode and keyCode

So my final word on this question is, "how can I can prevent user to input numerics in the text field? Web Application being used in iPhone and Android devices".

Answer 1

Does this work for you?

FIDDLE

$("#custName-info").on("input",function(event) {
  var inputValue = this.value;
  console.log(inputValue);
  this.value = this.value.replace(/[0-9]/g,"")
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<input type="text" id="custName-info" />

Do visit https://bugs.chromium.org/p/chromium/issues/detail?id=118639#c283

---

Original answer which did not work:

I substituted the keypress for keydown and charCode for which as recommended in

JavaScript KeyCode vs CharCode

FIDDLE - still works in iOS

$("#custName-info").on("keydown",function(event) {
  var inputValue = event.which;
  console.log(inputValue);
  if (!(inputValue >= 65 && inputValue <= 120) && (inputValue != 32 && inputValue != 0)) {
    event.preventDefault();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<input type="text" id="custName-info" />