Run ❯
×
Change Orientation
Change Theme, Dark/Light
<!DOCTYPE html> <html> <head> <title>Event Modifiers Combined</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' and 'Ctrl' Combination Generates Alert</h1> <div id="app"> <p>Press 'Ctrl' and 'S' in combination to generate an alert:</p> <textarea cols="20" rows="3" v-on:keydown.ctrl.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' and 'Ctrl' keys, in combination!") } } }) app.mount('#app') </script> </body> </html>