by cap-go2cfb277a1488No license72 starsListed Oct 8, 2026Updated Oct 8, 2026Repository updated today
Guide to handling keyboard in Capacitor apps including visibility detection, accessory bar, scroll behavior, and input focus. Use this skill when users have keyboard-related issues.
Guides handling of on-screen keyboard behavior in Capacitor mobile apps, covering events, resizing, scrolling and focus.
Manage keyboard behavior in iOS and Android apps.
Source:cap-go/capgo-skillsinskills/capacitor-keyboardat commit2cfb277
License: No license
Content belongs to its original authors. SourceWeft indexes it from a public repository.
cap-go
Guides migration of an existing web app, PWA, or SPA into a store-ready Capacitor iOS and Android app.
cap-go
Guides styling of Capacitor mobile apps with Tailwind CSS, covering safe areas, touch targets, dark mode and performance.
cap-go
Guides handling of safe areas in Capacitor apps for iPhone notch, Dynamic Island, home indicator and Android cutouts.
cap-go
Guide to building iOS and Material Design interfaces with Konsta UI components in React, Vue, and Svelte apps.
cap-go
Guide to viewing and filtering iOS and Android device logs for Capacitor app debugging.
cap-go
Reference guide for building Ionic Framework mobile UIs with Capacitor, covering components, theming and platform styling.
anthropics
Builds self-contained interactive HTML playgrounds with controls, live preview, and copyable prompt output.
anthropics
Provisions M5Stack ESP32 boards by detecting them on USB, flashing UIFlow 2.0 firmware, and installing a MicroPython app bundle.
anthropics
Guides iterating on a Cardputer-Adv MicroPython app bundle: adding apps, pushing files over USB-serial, tailing logs, and running REPL commands.
vercel-labs
Reviews UI code against Web Interface Guidelines fetched from a remote source and reports findings as file:line entries.
vercel-labs
React Native and Expo best-practice rules covering list performance, animation, navigation, UI patterns, state, and monorepo setup.
vercel-labs
Vercel's React and Next.js performance guidelines, organized as 70 rules for writing, reviewing, and refactoring code.
npm install @capacitor/keyboardnpx cap syncimport { Keyboard } from '@capacitor/keyboard';
// Show keyboardawait Keyboard.show();
// Hide keyboardawait Keyboard.hide();
// Listen for keyboard eventsKeyboard.addListener('keyboardWillShow', (info) => { console.log('Keyboard height:', info.keyboardHeight);});
Keyboard.addListener('keyboardWillHide', () => { console.log('Keyboard hiding');});// capacitor.config.tsplugins: { Keyboard: { resize: 'body', // 'body' | 'ionic' | 'native' | 'none' style: 'dark', // 'dark' | 'light' | 'default' resizeOnFullScreen: true, },},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 keyboardawait Keyboard.setAccessoryBarVisible({ isVisible: true });// Prevent zoom on iOS (use font-size >= 16px)input { font-size: 16px;}
// Handle form submissionform.addEventListener('submit', async (e) => { e.preventDefault(); await Keyboard.hide(); // Process form});
// Move to next fieldinput.addEventListener('keypress', (e) => { if (e.key === 'Enter') { const nextInput = getNextInput(); if (nextInput) { nextInput.focus(); } else { Keyboard.hide(); } }});