面试官：实现一个吸附在键盘上的输入框

实现效果 话不多说，先上效果和 demo 地址：demo 地址：https://codesandbox.io/p/devbox/keyboard-7fsqr8?file=%2Fsrc%2Fkeyboard.ts%3A54%2C24体验地址：https://7fsqr8-5173.csb.app实现原理 要实现一个吸附在键盘上的 input，可以分为以下步骤：监听键盘高度的变化获取「键盘顶部距离视口顶部的高度」设置 input 的位置第一步：监听监听键盘键盘高度的变化要监听键盘高度的变化，我们得先看看在键盘展开或收起的时候，分别会触发哪些浏览器事件：iOS 和部分 Android 浏览器展开：键盘展示时会依次触发 visualViewport resize -> focusin -> visualViewport scroll，部分情况下手动调用 input.focus 不触发 focusin收起：键盘收起时会依次触发 visualViewport resize -> focusout -> visualViewport scroll其他 Android 浏览器展开：键盘展示的时候会触发一段连续的 window resize，约过 200 毫秒稳定收起：键盘收起的时候会触 ………………………………