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

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

绿色小圈圈

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

阅读量345

点赞数

分类专栏：项目问题文章标签：项目问题

本文链接：https://blog.csdn.net/qq_34673379/article/details/94571869

版权

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

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

法一也是主流方法，但是可能我们项目里的输入法没有占据屏幕也就是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) => {