vant 软键盘_移动端页面输入底部被软键盘遮挡问题

本文介绍了移动端页面在安卓设备上输入时遇到的键盘遮挡底部内容问题,以及三种解决方法:window.onresize + window.scrollTo、Element.scrollIntoView() 和 Element.scrollIntoViewIfNeeded()。讨论了每种方法的实现原理、适用场景及潜在问题,并提供了示例代码。
摘要由CSDN通过智能技术生成

概述

近期有个移动端页面的项目,存在需要用户输入的表单信息。因为页面不存在滑动(通过overflow设为hidden的方式),所以在点击input标签输入信息时,在安卓机下键盘会遮挡页面底部内容,当点击键盘时,焦点所在的 input标签才会显示在视区里。在IOS不存在此问题(在软键盘弹出时,页面会自动顶上去),存在滑动的页面里也不存在该问题。

目前的解决方案一览

通过 window.onresize 监听页面大小变化,然后通过 window.scrollTo 使页面滚动到所需位置

通过 Element.scrollIntoView()

通过 Element.scrollIntoViewIfNeeded()

window.scrollTo

没什么好解释的上代码

window.onresize = function () {

if (document.activeElement.tagName == "INPUT" || document.activeElement.tagName == "TEXTAREA") {

setTimeout(function () {

var top = document.activeElement.getBoundingClientRect().top;

window.scrollTo(0,top);

}, 0);

}

}

提一下,因为iphone不存在此问题,可以加一个限制条件在android以外的终端下不执行此端代码

var ua = navigator.userAgent;

  • 1
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值