关于移动端input调出输入法上的问题

最新推荐文章于 2023-12-04 00:28:36 发布

原创最新推荐文章于 2023-12-04 00:28:36 发布 · 699 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #javascript

js 同时被 2 个专栏收录

4 篇文章

订阅专栏

css样式记录

4 篇文章

订阅专栏

在H5项目开发中，遇到输入法弹出导致页面上移且隐藏后无法恢复的问题，原因是设置了视口高度为100vh。解决办法是删除或设置min-height: 100vh。另外，输入法弹出时遮挡input，可通过监听input的聚焦和失去焦点事件来避免。

做H5项目中遇到的问题

调出的输入法时页面上移,隐藏输入法后导致页面不恢复

原因: 由于设置了视口高度 height:100vh 导致隐藏输入法时不能滚动导致
解决: 删除或 min-height:100vh ;
点击input 聚焦时弹出的输入法不能使页面上移,使得输入法遮挡住input 让input不能在可视区域内

解决: 监听获取焦点与失去焦点

// 输入框获得焦点时，元素移动到可视区域
  <input
     @focus="onFocus"
     @blur="onBlur"
     type="text"
     v-model="fromData.inputNickName"
     placeholder="请输入您的称呼"
   />

  methods:{
    onFocus() {
      this.timer = setInterval(() => {
        document.body.scrollTop = document.body.scrollHeight
      }, 100)
    },
    onBlur() {
      clearInterval(this.timer)
      document.body.scrollTop = document.body.scrollHeight;
    },
  }