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

如题所述

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

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

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

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

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

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

具体的数值可以再调整

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

使用第二种的html

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

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

温馨提示:答案为网友推荐,仅供参考
相似回答