The input elements in our UI allow any character to be typed into them. And we don't want that. We want these to only allow numeric values. Now of course, yes, we have the number type for input elements and that would solve our problem. But where's the fun in that? Because before that was even a thing, we had to write the JavaScript to filter out alpha characters. So that's what we are going to do in this episode.

to write the JavaScript to filter out alpha characters. So that's what we are going to do in this episode. And it might seem that it's pointless because yes, we can set these up to beat numbers only and let the browser handle it for us, which yeah, we would do that. But there are still going to be times when we need to filter the input for a text box, in which case this is something that is useful to know. And of course the way that we are going to make this work is

in which case this is something that is useful to know. And of course the way that we are going to make this work is by listening for events and we have this global event listener. And you know, really ideally this would be what we would use an input event is perfect for this because it covers so many use cases. But there are many other events that I want to expose you to, such as keyboard events. That means that we need to listen for one of the three

to, such as keyboard events. That means that we need to listen for one of the three keyboard events and we're gonna set this event listener up as a global event listener because we need to essentially handle this for at least three input elements, maybe more in the future. So it makes sense to use event delegation. Here. Now we have three primary keyboard events. The first is called keydown. That's when the user presses a key down

The first is called keyDown. That's when the user presses a key down and that's when that event fires. If they hold the key down, then that event will continue to fire, in which case you know, we could handle that. The next is keyUp, which is when the user releases the key. So the keyDown event fires when the user presses a key down. The keyUp events fires.

presses a key down. The key up events fires. Whenever the user releases that key and it goes up, it returns to its original state. Then we have a key press event, which occurs when the user presses a key down and then releases it. But when it comes to handling keyboard events, we typically don't use keypress anymore because it doesn't give us a lot of information.

we typically don't use key press anymore because it doesn't give us a lot of information. It tells us the key that was pressed, unless if it was a control key or a shift or alt or backspace. Uh, basically if it would print then we would know what key was pressed. But most of the time we need to know if the control key or the shift key or other type of keys were pressed and the key press event isn't going to help us here.

or the shift key or other type of keys were pressed and the key press event isn't going to help us here. So instead we are going to listen for the key down event because to me that makes sense when the user presses a key down, that's when we need to determine is this a key that is a numeric key or is it an alpha key? In which case then we would make our decision. Now because this is a global event listener, we need to essentially filter it down a bit because we only want to do something when one

to essentially filter it down a bit because we only want to do something when one of these input elements are typed in. So the first thing that we need to do is determine if one of these three input elements received the key down event. And the way that we would do that is to just find something common between the three of those. And you know, looking at these, you know, the ID all starts with input- and, and we could do that, but something else is that they are all contained inside

with input dash and, and we could do that, but something else is that they are all contained inside of this div element with an ID of options_custom. So we could do something like this. We could check if the event.target, which is the element that received the event, has a parentNode. And if that parentNode.id is not options_custom, then it is not an element that we care about. So we are just going to return.

then it is not an element that we care about. So we are just going to return. If you'll remember whenever we first started talking about the DOM, I said that everything is considered a node. Elements are nodes, attributes are nodes, even text is a node. And all of these nodes are related in some way. In fact, we could walk from node to node and go through the entire document. It's very boring, it's why we're not gonna do it.

and go through the entire document. It's very boring, it's why we're not gonna do it. But the most common type of relationship in the DOM is a parent and child. And you know, whenever we were appending nodes to the document, we used that appendChild method. Well, here we're kind of doing the opposite. We are looking at the element that received the event, the target, and we are checking if its parent element has an ID that is not options.custom

the target, and we are checking if its parent element has an ID that is not options custom and most elements are going to have a parent node. So this is gonna be a great way to determine if we want to work with one of these three input elements. But that's really not gonna be enough because there's also this input element for the game title and we should be able to type anything inside of that input element. So this is another element that we need to filter out.

inside of that input element. So this is another element that we need to filter out. But one thing that we can do here is look at the id, it has title in the id. So we could do something like this. If we get past this first check, then we know that we are inside of this div element and we are working with one of these four input elements. So then we could check if the target id index of and we want to see title.

So then we could check if the target id index of input and we want to see title. If it is greater than negative one, well then we just want to return because that means that this input element with the idea of input title received that event, we don't want to do anything for that input element. So we will just ignore that so that then if we make it past these two checks, then we know that we are working with one of these three input elements and those are the ones that we want to work with.

that we are working with one of these three input elements and those are the ones that we want to work with. So then we just need to know what key was pressed and the event object that is passed for a key down event has a key property and that tells us the key that was pressed. So we will be inside of the min range field. As I start to type, we can see those keys appear inside of the console. If I type a number, we see those values.

we can see those keys appear inside of the console. If I type a number, we see those values. If I press tab or the shift key or the control key or even the backspace key, we can see that those keys are written out so that we can check what key was pressed. So we could do something like this if the key is greater than or equal to 0. And if the key is less than or equal to 9, well then we know that the key

And if the key is less than or equal to 9, well then we know that the key that was pressed is a numeric value. So we'll just return. So by returning, we're basically telling the browser to go ahead, do what you normally do, which would be to allow the numeric value to appear inside of the text box by preventing the default. Well, the default action of the key down event for an input element is for that key to appear

Well, the default action of the key down event for an input element is for that key to appear inside of the text box. So we want to prevent that and that's what we use preventDefault for, so that now inside of the browser I can type any alpha character and it's not appearing. But if I type a numeric value, well we see that magically appear and the same is going to work for the max range,

that magically appear and the same is going to work for the max range, the attempts, but it's not going to work for game title because we are ignoring that input element. But you know, we've run into an issue here because now I'm using my arrow keys and I want to be able to position the cursor inside of an input element. I'm also pressing the tab key and nothing is happening. I'm pressing the backspace.

I'm also pressing the tab key and nothing is happening. I'm pressing the backspace. So we want to do more than just filter out alpha characters. We also need to allow these other keys that will probably be pressed. So let's do this. Let's create a const called allowedKeys. This is just going to be an array that contains the arrowLeft, the arrowRight, the backspace, the delete key, and then the tab key. So now yes, we still want to check if the key is

the backspace, the delete key, and then the tab key. So now yes, we still want to check if the key is between zero and nine, but we also want to see if the allowedKeys includes the key that was typed. And since we're using EKey a lot, I want to do this, let's say const key is EKey. That saves us just a little bit of typing, but that's, that's gonna be just fine. So that now inside of the browser I can type an alpha key,

but that's, that's gonna be just fine. So that now inside of the browser I can type an alpha key, I can type a numeric key, I can tab between, I can also position the cursor, press, backspace, or delete, therefore allowing the users to use these input elements like they normally would. Now, as I said at the beginning of this episode, filtering an input element just for numbers, is it's a little pointless because we can set it using the number type and that does everything for us.

it's a little pointless because we can set it using the number type and that does everything for us. But there are going to be times when you want to filter the input of a text box, in which case you'll need to listen for the keyDown event and allow only the keys that you want.