Mobile Keyboard Adjust (TS)

在手机上软键盘弹出时，让输入框始终可见并整体页面上移，带动画。提供简单 API，并附带 Vue3 示例。

安装

npm i xtdpyz-mobile-keyboard-adjust

使用

import { initKeyboardAdjust } from 'xtdpyz-mobile-keyboard-adjust';

const controller = initKeyboardAdjust({
	margin: 12,
	duration: 200,
	easing: 'ease-out',
	// 指定额外需要上推的元素（选择器或元素对象），例如固定底部栏
	targets: ['.bottom'],
	// 是否包含容器本身上移（默认 true）
	includeContainer: true,
});

// 需要时销毁
// controller.destroy();

也可以传入 container 指定需要整体上移的容器（默认是 document.scrollingElement）。对于固定定位元素（如底部操作栏），可通过 targets 指定一并上移。

Vue3 示例

见 examples/vue3/index.html，直接在浏览器打开即可（构建后使用 dist/index.umd.js）。

工作原理

• 通过 visualViewport 与 resize 事件检测键盘弹出（iOS 与 Android 兼容）。
• 计算当前聚焦输入框到底部的溢出距离，使用 transform: translateY(...) 平滑上移容器。
• 键盘关闭或失焦时自动还原。

发布到 npm

1. 修改 package.json 的版本号。
2. 登录 npm：npm login。
3. 构建：npm run build。
4. 发布：npm publish --access public。