Mobile Keyboard Adjust (TS)

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

安装

``bash
npm i xtdpyz-mobile-keyboard-adjust
`

使用

`ts
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`。