手机上键盘弹出时的一些问题

做手机商城接到一个需求。
具体大概是这样子的,要求用户点击购买按钮后,直接显示输入密码的弹窗并弹出键盘。
拿到需求一想,这挺简单的。
就麻利的写了个模拟的密码输入框,然后在用户点击购买按钮的时候让他弹出来,并且让焦点 focus 在 input 框上。
Chrome 上一试,完全没问题,觉得自己简直太棒了有没有。可是拿出自己的手机一试,oh no ~,键盘直接把页面给推了上去,导致完全看不到弹窗弹的是个什么东西。
解决前
但是在 Android 上是没有任何问题的。观察了下是因为 Android 和 ios 上键盘弹出的行为是不一样的,Android 上键盘弹出来,直接覆盖在原来的页面上,而 ios 上键盘弹出来的时候会直接把整个页面推上去。
怎么解决呢?其实也挺好解决,就是针对不同系统 hack 一下。

购买页面这个弹窗的定位是这么定位的:

// 后面的遮罩
.dialog-wrap{
width: 100%;
height: 100%;
background: rgba(0,0,0,.7);
position: relative;
}
// 密码输入框
.password-dialog{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: 0;
}

在弹窗弹出的时候,判断当前设备是 Android 还是 ios ,如果是 ios 设备,调整一下密码输入框定位就 OK 了。

$$('.go-buy').click(function(){
showPassword(); //调出弹窗
if(!device.android){
// 如果不是安卓,那就调整定位
$$('.password-dialog').css({
'top': 'initial',
'bottom': '20px'
})
}
})

最终就达到了目标,
解决后

之前也遇到过类似的问题,比如页面上有一个输入框,在 Android 上点击输入框调出键盘的时候,因为键盘不会把页面推上去,导致如果这个输入框在当前页面比较靠下的位置,就可能被弹出的键盘覆盖掉,看不到当前选中的输入框,影响用户体验。解决方法其实也很简单,就是当点击输入框弹出键盘的时候,调整页面 scrollTop 值,让页面的可视区域刚好滚动到输入框这一块,也就解决了这个问题。

这些坑,在事后看起来都很简单,然而当刚遇到的时候就是不知道怎么解决。比如密码输入框那个,当时总是在想怎么才能让键盘不把页面推上去,如果从这个角度去想解决办法那恐怕很难想出办法来,因为手机操作系统在实现的时候人家就那么规定了,你总不能用 js 去改这个键盘弹出方式吧,除非你写个模拟键盘,但那就是舍近求远了。但是如果换个角度,从调整页面上元素定位来解决,那就很简单了。
所以碰到问题,一定要从多种角度去想解决办法,这样才能更容易的找到问题的解决办法。一定要放开眼界,放开眼界啊!

如果觉得此文章对你有帮助,可以请我喝咖啡O(∩_∩)O
抹桥 支付宝

支付宝