Events - Keyboard & more

Danny Connell
A free video tutorial from Danny Connell
Indie App Developer & Instructor
4.7 instructor rating • 5 courses • 17,945 students

Learn more from the full course

Quasar V1: Cross-Platform Apps (with Vue 2, Vuex & Firebase)

Use Quasar V1, Vue JS 2, Vuex & Firebase to build a Cross Platform App for Web, iOS, Android, Mac & Windows

15:18:44 of on-demand video • Updated June 2021

  • How to create a real-world, cross-platform app for web, iOS, Android, Mac and Windows using Quasar Framework V1 and Firebase
  • How to manage the state of your app using Vuex
  • How to create a back-end for the app using Firebase Realtime Database - including user authentication, reading and writing data
  • All the essentials of Quasar Framework V1 and VueJS 2
English [Auto] Now, we're not just limited to click events, we can add events for all the different JavaScript events such as Chaouki Down, Biosensor must leave all that good stuff. So that said, a key up event to the input just starting at Quilp equals and then we'll call the method. Let's call it Heimdal Keigo. We'll create that method down here under the other one we created and keep up. Now, these events in bughouse will automatically pass the JavaScript event, object to your method. We can access that by just putting a variable name for that in here, so I'll call it a. Let's just log the out blog A. So let's see what happens when I press in here, you can see the event object here. So let's say if the user presses the escape key, we want to fire this clear message, thus clearing the message. So if I press the escape key while I'm in here. And look at this even object. You can see the key code for escape is twenty seven. So what we could do is. But an if statement here. If idot key code is equal to twenty seven. Then we can call this a clear message method. Now, again, if we want to call a method from within a method, we need to use this dot at the start so you can just call this dot. Clear message. Let's see if that's working. I in this field that I hit, escape the escape gate. The message is clear. Now, let's say. If they hit the enter key, we want to alert out this message. What we could do is Elsia. Actually, first of all, let's find out the key code to enter, so I'm just going clear the console here, press enter while I'm in this field. We just log out again because I got rid of the console log a. Let's see what the key code is. 13, so what we can do is elsea the DOT code is equal to 13. And then we can call the method, let's call it. Alert message and will create that method here, alert message. Where we will just alert the stock message. OK, let's see if that works. At the end, Zacky. And it alerts out the message. Which is pretty good. However, there is actually a shorthand way of doing this. What we can do is on this upscaled directive, we can either modify. So for the escape key, we can just add don't ask. And then from there, we can just fire clear message straight away. I'm just going to break this open to multiple lines. And then we can add another one to the answer, so Quilp thought, enter this time where we will call the alert message method. We can now just get rid of this handle method altogether. So let's see if that's still working. I'll put my cursor in the input, hit the escape key, the volume gets cleared. If I enter, it gets alerted. Pretty good. Now we can we can also use other events, such as a mouse and mouse leave. So just for demonstration purposes, let's just say a mouse and to. Event so center and then we'll call alert message again, save the. If I put my mouse inside this input. Doesn't work because I spelt Mouse into Enteron mouse and that's it. Let's try that again. I'll put my mouse inside this input. There you go. We got the message alerted. I'll change that to a must leave event. Now, when my cursor leaves this input, we should see the message alerted. Yeah, that's working, I'll just get rid of this Mousley event and I'll cap at night. So there you go.