convert from "onkeypress" to "addeventlistener("keypress",()=>{})

Question

I have the following line of JS written into my html on an input tag. I'm in class learning about separation of concerns and that we shouldn't put JS into our html. I've been trying to figure out a way to convert this lines:

onkeypress="return (event.charCode >= 65 && event.charCode <= 90) || (event.charCode >= 97 && event.charCode <= 122) || event.charCode == 32;"

To something like this:

document.querySelector("#login-first-name").addEventListener("keypress",function(event){
  return (event.charCode >= 65 && event.charCode <= 90) || (event.charCode >= 97 && event.charCode <= 122) || event.charCode == 32;
});

Any insight would be great.

an arrow function doesn't have bindings to the `this`, you should use regular `function(){}` — artanik, Jul 03 '20 at 12:23
@artanik - thanks for the quick feedback. I believe I tried ``function() {}`` the first time. I'll try again! :) — jrob11, Jul 03 '20 at 12:24
and `event` is a parameter of a callback function, and you have zero params in `onkeypress`, this should be something like `("keypress", function(event) {})` — artanik, Jul 03 '20 at 12:26
Also you need to add parameter `event` like `addEventListener("keypress", (event)=>{` and if you want to use `this` then use `function` like `addEventListener("keypress", function(event) {` — Karan, Jul 03 '20 at 12:26
@artanik -- that worked for the 2nd one (using ``this``). Still no luck with the first one using the return statement. — jrob11, Jul 03 '20 at 12:26

Karan · Accepted Answer · 2020-07-03T12:43:03.793

2

You need to add parameter event like addEventListener("keypress", (event)=>{ and if you want to use this then use function like addEventListener("keypress", function(event) {

After some research found that with document.querySelector("#login-first-name").addEventListener("keypress" need to assign event.returnValue instead of return. For more information refer this. Updated code also.

Check it below.

document.querySelector("#login-first-name").addEventListener("keypress", (event) => {
  event.returnValue = (event.charCode >= 65 && event.charCode <= 90) || (event.charCode >= 97 && event.charCode <= 122) || event.charCode == 32;
});

document.querySelector("#login-first-name").addEventListener("keyup", function() {
  this.value = this.value.charAt(0).toUpperCase() + this.value.slice(1);
});

<input id='login-first-name' />

edited Jul 03 '20 at 12:43

answered Jul 03 '20 at 12:28

Karan

12,059
3
24
40

thank you for the response. I added ``event`` like your code suggests, but it still isn't working. This code is supposed to prevent non-alpha characters and numbers. It should only accept letters. The code snippet allows non-alpha characters too :( – jrob11 Jul 03 '20 at 12:32
The `event` isn't required [since it is a global property](https://developer.mozilla.org/en-US/docs/Web/API/Window/event). But it's nevertheless still recommended to explicitly list it as a parameter. – Ivar Jul 03 '20 at 13:30
@Ivar, OMG, I am using it for so long and today I come to know that it is a `global property`. Thanks man for your comment. I learn something today. Really appreciate it. – Karan Jul 03 '20 at 13:40

convert from "onkeypress" to "addeventlistener("keypress",()=>{})

1 Answers1