Capacitor Keyboard

Handles keyboard events and behavior in Capacitor apps across iOS and Android. You get programmatic show/hide, visibility listeners with height info, configurable resize modes (body, ionic, native, none), and iOS accessory bar control. The CSS variable pattern for keyboard height is solid for positioning fixed inputs, and the scroll-to-input helper solves that annoying problem where the keyboard covers your active field. Configuration is straightforward through capacitor.config.ts. If you're building a chat app or any form-heavy mobile app with Capacitor, you'll need this to avoid the default janky keyboard behavior. The iOS 16px font size tip alone will save you from the auto-zoom headache.

skills.sh installs: 1.1K
GitHub stars: 77
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add cap-go/capgo-skills --skill capacitor-keyboard --agent claude-code

Installs into .claude/skills of the current project.

Files

Keyboard Handling in Capacitor

When to Use

TRIGGER when:

Focused input is covered by the keyboard, or the page scrolls unexpectedly
Chat composer / fixed footer does not stick to the keyboard
White or black band above the keyboard (Android 15+ edge-to-edge, iOS backdrop)
100vh / dvh layout collapses when the keyboard opens
iOS zooms into inputs, or the QuickType/accessory bar looks wrong
Keyboard events never fire or fire twice

Do not use:

Notch / home-indicator / status-bar padding: safe-area-handling
Ionic ion-input, ion-footer styling: ionic-design
Labels, focus order, screen readers: capacitor-accessibility

Platform model (the key decision)

	iOS	Android
Who resizes	Plugin, per `resize` mode	OS + WebView; `resize` config is ignored
Events	`keyboardWillShow` before animation, `keyboardDidShow` after	Will/Did fire almost together
JS control	`setResizeMode`, `getResizeMode`, `setScroll`, `setStyle`, `setAccessoryBarVisible` (iPhone only)	`show()` (Android only), `hide()`