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.

Practice

1. What does the Vue key modifier @keyup.enter do in a template?

easy

A. It triggers the event handler only when the Enter key is released.

B. It triggers the event handler on any key press.

C. It triggers the event handler only when the Escape key is pressed.

D. It triggers the event handler when the mouse is clicked.

Solution

1. Step 1: Understand the key modifier syntax

   The @keyup.enter listens for the keyup event but only activates if the Enter key was released.

2. Step 2: Compare with other keys and events

   Other keys like Escape or mouse clicks are not triggered by this modifier.

3. Final Answer:

   It triggers the event handler only when the Enter key is released. -> Option A

4. Quick Check:

   Key modifier .enter = Enter key only [OK]

Hint: Key modifiers match specific keys like .enter for Enter key [OK]

Common Mistakes:

• Confusing keyup with keydown events
• Thinking it triggers on any key press
• Mixing Enter with Escape key

2. Which of the following is the correct Vue syntax to listen for the Escape key on a keydown event?

easy

A. @keydown.escKey

B. @keydown.escape

C. @keydown.Escape

D. @keydown.esc

Solution

1. Step 1: Recall Vue key modifier names

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

2. Step 2: Check syntax correctness

   The correct syntax is lowercase @keydown.esc. Other variants like .escape or capitalized forms are invalid.

3. Final Answer:

   @keydown.esc -> Option D

4. Quick Check:

   Escape key modifier = .esc [OK]

Hint: Use official Vue key names like .esc, not full words [OK]

Common Mistakes:

• Using .escape instead of .esc
• Capitalizing key modifiers
• Adding extra words like .escKey

3. Given this Vue template code:

<input @keydown.ctrl.enter="submit" />

What happens when the user presses Ctrl + Enter?

medium

A. The submit method is called on any Ctrl key press.

B. The submit method is called on any Enter key press.

C. The submit method is called only if Ctrl and Enter are pressed together.

D. The submit method is never called because the syntax is invalid.

Solution

1. Step 1: Understand combined key modifiers

   The @keydown.ctrl.enter listens for the Enter key pressed while Ctrl is held down.

2. Step 2: Confirm event triggering condition

   The method triggers only when both Ctrl and Enter keys are pressed simultaneously, not separately.

3. Final Answer:

   The submit method is called only if Ctrl and Enter are pressed together. -> Option C

4. Quick Check:

   Combined keys like .ctrl.enter require both keys pressed [OK]

Hint: Multiple key modifiers mean all keys must be pressed together [OK]

Common Mistakes:

• Thinking it triggers on Enter alone
• Assuming Ctrl alone triggers it
• Believing syntax is invalid

4. Identify the error in this Vue event listener:

<input @keyup.shift.enter="submit" />

medium

A. The event should be @keydown, not @keyup for Shift + Enter.

B. There is no error; this syntax is valid.

C. The correct modifier is .enter.shift, order matters.

D. The key modifier .shift.enter is invalid; modifiers must be separated by dots.

Solution

1. Step 1: Check Vue key modifier chaining rules

   Vue allows chaining multiple key modifiers separated by dots in any order, so .shift.enter is valid.

2. Step 2: Confirm event type and usage

   Using @keyup with .shift.enter is valid and triggers when Shift and Enter are released together.

3. Final Answer:

   There is no error; this syntax is valid. -> Option B

4. Quick Check:

   Multiple key modifiers chained with dots are valid [OK]

Hint: Order of key modifiers does not matter; chaining with dots is correct [OK]

Common Mistakes:

• Thinking modifier order matters
• Confusing keyup and keydown necessity
• Assuming .shift.enter is invalid

5. You want to trigger a method only when the user presses Ctrl + Shift + S to save a form. Which Vue event listener is correct?

hard

A. @keydown.ctrl.shift.s="saveForm"

B. @keydown.shift.ctrl.s="saveForm"

C. @keydown.s.ctrl.shift="saveForm"

D. @keydown.save.ctrl.shift="saveForm"

Solution

1. Step 1: Understand key modifier chaining

   Vue allows chaining key modifiers in any order, but the key itself must be last, so .ctrl.shift.s is correct.

2. Step 2: Validate each option

   @keydown.ctrl.shift.s="saveForm" correctly places the key s last. @keydown.s.ctrl.shift="saveForm" places the key in the middle, which is invalid. @keydown.save.ctrl.shift="saveForm" uses a non-existent modifier .save.

3. Step 3: Choose the best standard syntax

   @keydown.ctrl.shift.s="saveForm" is the most standard and clear syntax.

4. Final Answer:

   @keydown.ctrl.shift.s="saveForm" -> Option A

5. Quick Check:

   Key modifiers chain with keys last; .ctrl.shift.s is correct [OK]

Hint: Put the key last, modifiers before it chained by dots [OK]

Common Mistakes:

• Placing the key before modifiers
• Using non-existent modifiers like .save
• Assuming modifier order matters strictly