Run ❯
Get your
own
website
×
Change Orientation
Save Code
Change Theme, Dark/Light
Go to Spaces
<!DOCTYPE html> <html> <head> <title>Mouse Pointer Position</title> <style> #app { border: black dashed 1px; width: 200px; padding: 0 20px 20px 20px; } #app > div { width: 160px; background-color: lightcoral; padding: 20px; } #app span { color: black; font-weight: bold; font-family: 'Courier New', Courier, monospace; } </style> </head> <body> <h1>Example: 'S' Key Generates Alert</h1> <div id="app"> <p>The 'S' key generates an alert:</p> <textarea cols="20" rows="3" v-on:keydown.s="createAlert" placeholder="Start writing.."></textarea> </div> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> <script> const app = Vue.createApp({ methods: { createAlert(evt) { alert("You pressed the 'S' key!"); } } }) app.mount('#app') </script> </body> </html>
