convert JQuery into addEventListener for keypress event

Question

I needed to craete an input which only accepts number. For that, I have created an input with type text and only accepts 5 digits of length.

<input id="inputNumber" type="text" maxlength="5">

For accepting only number, I created jquery code like the following.

$("#inputNumber").keypress(function (value) {
// If the letter is not digit then display error and don't type anything
if (value.which != 8 && value.which != 0 && (value.which < 48 || value.which > 57)) {
return false;
}
else {
return true;
}
});

I tried to convert it into AddEventListner for my Type script file but failed. I even tried below method but failed again. How can I resolve this.

Referece: keypress event doesn't log input value first time event is fired

prathameshk73 · Answer 1 · 2020-05-22T09:25:32.937

Please try below keydown event and prevent the characters based on the keycode?

window.addEventListener('DOMContentLoaded', (event) => {
     var inputNumber = document.getElementById('inputNumber');
  inputNumber.addEventListener('keydown', function(event) {
                        if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || event.keyCode ==  13 || event.keyCode == 190 || event.keyCode == 110 || (event.keyCode == 65 && event.ctrlKey === true) || (event.keyCode >= 35 && event.keyCode <= 39) || event.keyCode == 189) {
                            return
                        } else {
                            if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105)) {
                                event.preventDefault()
                            }
                        }
    })
});

<input id="inputNumber" type="text" maxlength="5"/>

thanks for the reply but I need addEventListener('DOMContentLoaded', .........) for above functionality — Abhi Singh, May 22 '20 at 09:21
@AbhiSingh Please check updated code which uses addEventlister — prathameshk73, May 22 '20 at 09:26

Józef Podlecki · Accepted Answer · 2020-05-22T09:58:16.343

1

If you are looking for js equivalent code that might look like:

const inputNumber = document.querySelector("#inputNumber");

inputNumber.addEventListener("keypress", (event) => {

  if (isNaN(event.key)) {
    event.preventDefault();
    return false;
  } else {
    return true;
  }
});

<input id="inputNumber" type="text" maxlength="5">

I needed to craete an input which only accepts number.

You can use input type="number" instead or simplify validation to !isNaN(event.key)

const inputNumber = document.querySelector("#inputNumber") as HTMLInputElement;

inputNumber.addEventListener("keydown", (event: KeyboardEvent) => {

  if (isNaN(Number(event.key))) {
    event.preventDefault();
    return false;
  } else {
    return true;
  }
});

edited May 22 '20 at 09:58

answered May 22 '20 at 09:12

Józef Podlecki

10,453
5
24
50

1

But it is still accepting text....I need only numbers to be accepted – Abhi Singh May 22 '20 at 09:14
Updated answer. Now it should be okay. – Józef Podlecki May 22 '20 at 09:21
I am getting error when I used your code in TypeScript specially in isNaN(event.key) line. It is showing **Property key does not exist on type event**. How to resolve this? – Abhi Singh May 22 '20 at 09:35
change `(event)` to `(event: KeyboardEvent)` – Józef Podlecki May 22 '20 at 09:37
Changed to (event: KeyboardEvent) but getting Error **Error** TS2769 (TS) No overload matches this call. Overload 1 of 2, '(type: "fullscreenchange" | "fullscreenerror", listener: (this: Element, ev: Event) => any, options?: boolean | AddEventListenerOptions | undefined): void', gave the following error. – Abhi Singh May 22 '20 at 09:42
and this error too: **Argument of type 'string' is not assignable to parameter of type 'number'** – Abhi Singh May 22 '20 at 09:45
For that one change `isNaN(event.key)` to `isNaN(Number(event.key))`. As for previous error I see [keypress](https://developer.mozilla.org/en-US/docs/Web/API/Document/keypress_event) event is [deprecated](https://stackoverflow.com/questions/52882144/replacement-for-deprecated-keypress-dom-event) so you can change it to [keydown](https://developer.mozilla.org/en-US/docs/Web/API/Element/keydown_event) – Józef Podlecki May 22 '20 at 09:50
Did this **addEventListener("keydown", (event)** and **(isNaN(Number(event.key)))** and showing same error. Property key does not exist on type event – Abhi Singh May 22 '20 at 09:56
Updated answer. – Józef Podlecki May 22 '20 at 09:59
thank you it is working perfectly but I have only one issue I am not able to use backspace button to remove unwanted number. – Abhi Singh May 22 '20 at 10:03

convert JQuery into addEventListener for keypress event

2 Answers2