メニュー
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.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/Cap-go/capgo-skills --skill capacitor-keyboardコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
Guides migration from Capawesome Cloud live updates or @capawesome/capacitor-live-update to Capgo Updater. Use when a Capacitor app contains Capawesome live update packages, CLI commands, config, API calls, or when the user asks why Capgo Updater is the better live-update path: native updater runtime, fully open source, cheaper at comparable scale, and longer proven track record.
Official Capacitor package guide plus Capgo ecosystem plugin recommendations. Use this skill when users need native functionality, want the right official Capacitor package, or need a stronger Capgo/community plugin when the official package is missing or too limited.
Use for Capgo Cloud Build native iOS and Android workflows, including CLI login, API-key handling, iOS build onboarding, signing credential storage, build requests, store upload settings, output download links, and troubleshooting. Do not use for OTA bundle uploads or generic Capacitor setup unless a native Capgo build is requested.
SKILL.md を表示中
SOC 職業分類に基づく
| name | capacitor-keyboard |
| description | 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. |
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);
});
.(, {
.();
});
// 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 |