From capacitor-features
Manages keyboard behavior in Capacitor apps on iOS/Android: visibility events, resize modes, accessory bar, scroll-to-input, and input focus. Use for keyboard issues in hybrid mobile apps.
npx claudepluginhub cap-go/capgo-skills --plugin capacitor-featuresThis skill uses the workspace's default tool permissions.
Manage keyboard behavior in iOS and Android apps.
Guides safe area handling in Capacitor apps for iPhone notch, Dynamic Island, home indicator, and Android cutouts using CSS, JavaScript, and native solutions. Fixes layout issues on modern devices.
Provides accessibility guidelines for Capacitor apps covering screen readers, semantic HTML, focus management, touch targets, color contrast, WCAG compliance, and native iOS/Android support.
Guides integrating web frameworks like Next.js, React, Vue, Angular, Svelte with Capacitor for mobile apps via static exports. Use when converting web apps to hybrid native mobile.
Share bugs, ideas, or general feedback.
Manage keyboard behavior in iOS and Android apps.
npm install @capacitor/keyboard
npx cap sync
import { Keyboard } from '@capacitor/keyboard';
// Show keyboard
await Keyboard.show();
// Hide keyboard
await Keyboard.hide();
// Listen for keyboard events
Keyboard.addListener('keyboardWillShow', (info) => {
console.log('Keyboard height:', info.keyboardHeight);
});
Keyboard.addListener('keyboardWillHide', () => {
console.log('Keyboard hiding');
});
// capacitor.config.ts
plugins: {
Keyboard: {
resize: 'body', // 'body' | 'ionic' | 'native' | 'none'
style: 'dark', // 'dark' | 'light' | 'default'
resizeOnFullScreen: true,
},
},
| Mode | Description |
|---|---|
body | Resize body element |
ionic | Use Ionic's keyboard handling |
native | Native WebView resize |
none | No automatic resize |
import { Keyboard } from '@capacitor/keyboard';
import { Capacitor } from '@capacitor/core';
if (Capacitor.isNativePlatform()) {
Keyboard.addListener('keyboardWillShow', (info) => {
document.body.style.setProperty(
'--keyboard-height',
`${info.keyboardHeight}px`
);
});
Keyboard.addListener('keyboardWillHide', () => {
document.body.style.setProperty('--keyboard-height', '0px');
});
}
.chat-input {
position: fixed;
bottom: calc(var(--keyboard-height, 0px) + env(safe-area-inset-bottom));
left: 0;
right: 0;
}
Keyboard.addListener('keyboardWillShow', async (info) => {
const activeElement = document.activeElement as HTMLElement;
if (activeElement) {
// Wait for keyboard animation
await new Promise((r) => setTimeout(r, 100));
activeElement.scrollIntoView({
behavior: 'smooth',
block: 'center',
});
}
});
// Show/hide the toolbar above keyboard
await Keyboard.setAccessoryBarVisible({ isVisible: true });
// Prevent zoom on iOS (use font-size >= 16px)
input {
font-size: 16px;
}
// Handle form submission
form.addEventListener('submit', async (e) => {
e.preventDefault();
await Keyboard.hide();
// Process form
});
// Move to next field
input.addEventListener('keypress', (e) => {
if (e.key === 'Enter') {
const nextInput = getNextInput();
if (nextInput) {
nextInput.focus();
} else {
Keyboard.hide();
}
}
});
| Issue | Solution |
|---|---|
| Content hidden | Use resize mode |
| Slow animation | Use keyboardWillShow |
| iOS zoom | Use 16px font-size |
| Android overlap | Set windowSoftInputMode |