Soft Keyboard

Test virtual keyboard

Keyboard: Hidden

No input focused

Input Types & Keyboard

Different input types trigger different soft keyboards on mobile. Use the correct type to improve UX: email shows @, tel shows numpad, etc. Test keyboard appearance and that it doesn't obscure important content.

Input Types

Different keyboard triggers

Texttype="text"

Emailtype="email"

Phonetype="tel"

Numbertype="number"

URLtype="url"

Datetype="date"

Passwordtype="password"

Event Log

Keyboard events

Focus an input to see events

inputMode Values

text - Default

numeric - Numbers

decimal - Numbers + .

tel - Phone pad

email - Email

url - URL

Testing Tips

• Verify correct keyboard type appears
• Check content scrolls above keyboard
• Test "Done"/"Next" button behavior
• Verify submit works from keyboard

Keyboard Handling Patterns

Best practices

✓ Good Practices

• Scroll input into view on focus
• Use visualViewport API for keyboard height
• Position fixed elements above keyboard
• Support "enterkeyhint" for action button
• Use "autocomplete" for autofill

✕ Common Issues

• Fixed footer overlaps keyboard
• Submit button hidden behind keyboard
• Wrong keyboard type for input
• No scroll on long forms
• Keyboard dismissed unexpectedly

Testing Tips

Automation hints

✓ Check input type attribute for correct keyboard
✓ Verify inputMode attribute presence
✓ Test with mobile emulation in browser DevTools
✓ Check password visibility toggle functionality

Soft Keyboard

Test virtual keyboard

Keyboard: Hidden

No input focused

Input Types & Keyboard

Input Types

Different keyboard triggers

Texttype="text"

Emailtype="email"

Phonetype="tel"

Numbertype="number"

URLtype="url"

Datetype="date"

Passwordtype="password"

Event Log

Keyboard events

Focus an input to see events

inputMode Values

text - Default

numeric - Numbers

decimal - Numbers + .

tel - Phone pad

email - Email

url - URL

Testing Tips

• Verify correct keyboard type appears
• Check content scrolls above keyboard
• Test "Done"/"Next" button behavior
• Verify submit works from keyboard

Keyboard Handling Patterns

Best practices

✓ Good Practices

• Scroll input into view on focus
• Use visualViewport API for keyboard height
• Position fixed elements above keyboard
• Support "enterkeyhint" for action button
• Use "autocomplete" for autofill

✕ Common Issues

• Fixed footer overlaps keyboard
• Submit button hidden behind keyboard
• Wrong keyboard type for input
• No scroll on long forms
• Keyboard dismissed unexpectedly

Testing Tips

Automation hints

✓ Check input type attribute for correct keyboard
✓ Verify inputMode attribute presence
✓ Test with mobile emulation in browser DevTools
✓ Check password visibility toggle functionality

Soft Keyboard

Input Types & Keyboard

Input Types

Event Log

inputMode Values

Testing Tips

Keyboard Handling Patterns

✓ Good Practices

✕ Common Issues

Testing Tips

Timer

Soft Keyboard

Input Types & Keyboard

Input Types

Event Log

inputMode Values

Testing Tips

Keyboard Handling Patterns

✓ Good Practices

✕ Common Issues

Testing Tips

Timer