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

GradualJin

于 2021-06-25 12:24:57 发布

阅读量635

点赞数

分类专栏： js css样式记录文章标签： css javascript

本文链接：https://blog.youkuaiyun.com/Not_affect/article/details/118217024

版权

js 同时被 2 个专栏收录

4 篇文章

订阅专栏

css样式记录

4 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

做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;
    },
  }