关于移动端输入法遮住input输入框相关问题

最新推荐文章于 2024-01-22 14:33:16 发布

原创最新推荐文章于 2024-01-22 14:33:16 发布 · 393 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#项目问题

项目问题专栏收录该内容

1 篇文章

订阅专栏

针对移动端输入法弹出时遮挡input输入框的问题，本文介绍了三种解决方法：一、尝试调整输入法显示方式；二、通过改变根元素高度适应；三、修改根元素的top值。但第三种方法可能影响用户体验，因需谨慎使用。

法一也是主流方法，但是可能我们项目里的输入法没有占据屏幕也就是clientHeight ，因此失败。

	Element.scrollIntoView() //使当前的元素滚动到浏览器的可视区域内
	Element.scrollIntoViewIfNeeded()  //若当前元素已经在浏览器的可视区域内则不滚动否则滚动

法二改变根元素的高度：

在vue里注册一个全局方法，需要在每个input被遮住的页面mounted 之后使用，否则dom未渲染，获取不到页面高度
根元素 position 为absolute 并且overflow：scroll；

function controlKeyboard() {
  setTimeout(() => {
    const regDom = document.querySelector('#app') // 获取页面根元素
    const queryStr = 'input[type="number"],input[type="text"], input[type="tel"], input[type="password"], textarea'
    const inputs = regDom.querySelectorAll(queryStr);
    const fixHeight = 348;
    var nowClientHeight = document.documentElement.clientHeight || document.body.clientHeight;
    inputs.forEach((item, i) => {
      item.addEventListener('focus', () => {
        // 改变高度上移页面
        regDom.style.height = (nowClientHeight - 320) + 'px';
      })
      item.addEventListener('blur', () => {
        // 恢复高度
        regDom.style.height = nowClientHeight + 'px';
      })
    });
  }, 1000);

}
export default {
  install: function (Vue) {
    Vue.prototype.controlKeyboard = () => controlKeyboard()
  }
};

3 法三改变根元素的top值要求和上面一样只是用户体验效果不是很好，top改了之后，无法上下滑动了

function controlKeyboard() {
  setTimeout(() => {
    const regDom = document.querySelector('#app') // 获取页面根元素
    const queryStr = 'input[type="number"],input[type="text"], input[type="tel"], input[type="password"], textarea'
    const inputs = regDom.querySelectorAll(queryStr);
    const fixHeight = 348;

    function getElementOffsetTop(el) {
      let top = el.offsetTop
      let cur = el.offsetParent
      while (cur != null) {
        top += cur.offsetTop
        cur = cur.offsetParent
      }
      return top
    };
    const offsetTopArr = Array.prototype.map.call(inputs, item => {
      return getElementOffsetTop(item) // offsetTop只能获取到顶部距它的offsetParent的距离，需此方法获取到元素距顶部的距离
    })
    var nowClientHeight = document.documentElement.clientHeight || document.body.clientHeight;
    inputs.forEach((item, i) => {
      item.addEventListener('focus', () => {
        // 改变top上移页面
        regDom.style.top = '-' + (offsetTopArr[i] - fixHeight) + 'px';
        // 改变高度上移页面
        //regDom.style.height = (nowClientHeight - 320) + 'px';
      })
      item.addEventListener('blur', () => {
        // 恢复top
        regDom.style.top = 0
        // 恢复高度
       
        regDom.style.height = nowClientHeight + 'px';
      })
    });
  }, 1000);

}
export default {
  install: function (Vue) {
    Vue.prototype.controlKeyboard = () => controlKeyboard()
  }
};