Vue h5项目解决键盘遮挡输入框问题

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue h5项目解决键盘遮挡输入框问题相关的知识,希望对你有一定的参考价值。

参考技术A 使用一个不太常用的方法: Element.scrollIntoView() 点击查看MDN文档说明
scrollIntoView() 方法会滚动元素的父容器,使被调用 scrollIntoView() 的元素对用户可见。

本方法亲测可用

移动端中 H5输入框在弹起键盘后被遮挡

参考技术A

可见,键盘遮盖住了这个输入框,而且此时不能滚动,而按钮的设计为始终置底
置底的按钮为fixed布局,观察得知,这样当键盘弹起时,其实页面的高度被缩短成类似于这样

这样,始终置底的元素会遮盖住输入框,并且由于界面并没有长到可以滚动的地步,输入框非常正常地被遮住了
【解决办法】

首先,把置底元素设置成,在页面的底部而非屏幕的底部

然后,设置页面的高度,让按钮有置底的效果

注意有 最小高度 ,因为当键盘弹起时,100vh是缩小的那部分的高度,而不是屏幕高度
*如果有大屏的需求,适配一下就好

这样,当键盘弹起时,内容就是可以滚动的了,出于用户体验的需求,可以在focus输入框的时候,把滚动条划一下,露出输入框

具体的数值可以再调整

设置content为 overflow: auto;
让content的高度为 100vh-buttonHeight

使用第二种的html

利用window.resize方法,这个方法的特性是:当调整浏览器窗口的大小时,发生 resize 事件。

screenHeightNoChange==true的时候使用方法三,当==false的时候,将button变成position:relative; 就能解决问题了
以上,就是解决问题的方法了

以上是关于Vue h5项目解决键盘遮挡输入框问题的主要内容,如果未能解决你的问题,请参考以下文章

H5输入框在输入信息的时候 页面会变形 并且在页面不变形的时候 键盘会遮挡 输入框的解决办法

h5输入框加载手机键盘超时卡死

[vue]利用自定义指令处理系统键盘遮挡input输入框

安卓手机底部输入框被软键盘遮挡的坑

flutter去除Appbar的阴影、键盘遮挡下部输入框

安卓H5软键盘遮挡输入框