js实现监听键盘的收起和弹出

最新推荐文章于 2023-12-19 14:25:32 发布

mr_japson

最新推荐文章于 2023-12-19 14:25:32 发布

阅读量5k

点赞数

分类专栏：技术 javascript 前端技术文章标签： js实现键盘监听 ios键盘问题唤起键盘导致input失焦

本文链接：https://blog.csdn.net/mr_japson/article/details/99411662

版权

在Vue项目的弹出层popup中，当ios手机键盘弹出和收起时，输入框input可能因键盘遮挡导致失焦。分析原因是键盘收起时弹层位置未及时恢复。通过监听键盘状态并调整弹层位置，可以解决这个问题。具体实现包括getDevice方法的代码实现，有效解决了键盘收起和唤起事件的监听。

摘要由CSDN通过智能技术生成

之前遇到一个bug，前提因素：

1. vue项目

2. 弹出层popup

3. ios手机

4. 弹出层中的input获取焦点后点击键盘上的“完成”按钮收起键盘，再次触发input获取焦点发现没有反应。

分析原因后，发现实则是弹出层随着键盘的收起和展开进行了下移和上移，而元素的点击位置没有实时变化，如下：

所以，需要实现收起后弹层归位，代码如下：

/**
* 收起键盘导致弹层位置错乱，需要强制滚动页面，让它归位
*/
let isReset = true; //是否归位
      if (cm.getDevice() === 'ios') {
        document

关注

专栏目录