Key modifiers for keyboard events in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to listen for the Enter key press using Vue key modifiers.

Vue

<button @keyup.[1]="submitForm">Submit</button>

Drag options to blanks, or click blank then click option'

Aenter

Bspace

Cclick

Desc

Attempts:

3 left

💡 Hint

Common Mistakes

Using .click instead of .enter for keyboard events

Confusing key names like 'space' or 'esc' for Enter

The enter key modifier listens for the Enter key press event.

2fill in blank

medium

Complete the code to listen for the Ctrl key combined with the S key using Vue key modifiers.

Vue

<div @keydown.[1].[2]="saveDocument">Save</div>

Drag options to blanks, or click blank then click option'

Actrl

Bshift

Calt

Ds

Attempts:

3 left

💡 Hint

Common Mistakes

Using .shift instead of .ctrl for Control key

Using .alt or .meta incorrectly

The ctrl and s modifiers detect the Ctrl + S key press.

3fill in blank

hard

Fix the error in the code to correctly listen for the Escape key press using Vue key modifiers.

Vue

<input @keyup.[1]="closeModal">

Drag options to blanks, or click blank then click option'

AescapeKey

BescKey

Cesc

Descape

Attempts:

3 left

💡 Hint

Common Mistakes

Using .escape instead of .esc

Adding extra words like 'Key' to the modifier

Vue uses esc as the correct key modifier for the Escape key.

4fill in blank

hard

Fill both blanks to listen for Shift + Tab key press using Vue key modifiers.

Vue

<input @keydown.[1].[2]="focusPrevious">

Drag options to blanks, or click blank then click option'

Ashift

Btab

Center

Dctrl

Attempts:

3 left

💡 Hint

Common Mistakes

Using .ctrl instead of .shift

Using .enter instead of .tab

The shift and tab modifiers together detect Shift + Tab key press.

5fill in blank

hard

Fill all three blanks to listen for Alt + Shift + F key press using Vue key modifiers.

Vue

<div @keydown.[1].[2].[3]="formatCode">Format</div>

Drag options to blanks, or click blank then click option'

Aalt

Bshift

Cf

Dctrl

Attempts:

3 left

💡 Hint

Common Mistakes

Using .ctrl instead of .alt

Mixing up the order of modifiers

Using uppercase letters in modifiers

Using alt, shift, and f modifiers together listens for Alt + Shift + F key press.