虚拟键盘挡住控件

本文介绍了一种在手机网站填写长表单时,防止虚拟键盘遮挡输入框的方法,通过自动滚动页面确保输入框始终可见,提升用户体验。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在一些手机网站上填表单时,如果表单比较长,在点击控件打算输入文字时控件就被虚拟键盘挡住看不见了。用户还要去滚动页面才能看到控件,但虚拟键盘又会因此消失。当再次得到焦点时候可能又发生同样的情况。这是非常糟糕的用户体验,所以需要对其改进。
  虚拟键盘的弹出只非常暴力的,它直接遮在页面上出现,不会改变页面尺寸,也不会触发resize事件。而且这是系统级的东西,程序无法对其做进一步的控制,甚至无法获取到虚拟键盘的高度。
  但好在虚拟键盘通常从下方出现,所以对于页面上较长的表单,在控件得到焦点后应该将页面做适当的滚动,让目标控件处于顶部的位置,这样就能保证控件在虚拟键盘弹出后依然对用户可见了。大概就是这种感觉:
运行A:<input/><br/>
B:<input/><br/>
C:<input/><br/>
D:<input/><br/>
E:<input/><br/>
F:<input/><br/>
G:<input/><br/>
H:<input/><br/>
I:<input/><br/>
<script>
document.body.style.paddingBottom=document.body.offsetHeight+"px";
var s=document.getElementsByTagName("input");
for(var i=0;i<s.length;i++)
  s[i].onfocus=function(e){
    var t=this.offsetTop;
    document.body.scrollTop=t-4;
  };
</script>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值