KeyboardToolbar — device test

Open this page on an iPhone in Safari. A desktop has no software keyboard, so the bar only docks at the bottom there.

Variant
Fallback
state
—
inset
—
activeElement
—
items
—
innerHeight
0
visualViewport.height
n/a
visualViewport.offsetTop
n/a
visualViewport.scale
n/a

Checklist

  1. Tap the note: the bar lifts onto the keyboard (no gap, not hidden under it).
  2. Tap Bold, Italic, the rail items: the keyboard stays up and the caret stays put.
  3. Swipe the rail sideways: it scrolls; the dismiss circle stays pinned.
  4. With the keyboard up, scroll the page: the bar stays on the keyboard.
  5. Tap the chevron: the keyboard hides and the bar settles above the home indicator.
  6. Focus Title, then Amount (number pad): the bar sits above iOS's own ‹ › ✓ bar.
  7. Rotate to landscape and repeat 1 and 5.
  8. Switch to hidden: the bar appears only while a field has focus.
  9. VoiceOver on: double-tap the note (items reads span), then swipe into the bar. The keyboard stays up and activeElement stays textarea. Double-tap Bold: it toggles and the keyboard stays up.
  10. VoiceOver on: swipe to Hide keyboard and double-tap it. The keyboard closes, activeElement reads body and items reads button.