安卓输入框被虚拟键盘挡住的问题安卓输入框被虚拟键盘挡住的问题(微信开发微信开发)
主要介绍了安卓输入框被虚拟键盘挡住的问题(微信开发)的相关资料,需要的朋友可以参考下
先通过一个页面看下事情的来龙去脉，页面如下所示：
这个页面刚好一屏幕大小，所以没有滚动条，因为“保存”键上面那个项目备注是需要用户去填写的，当他点击后就会出现虚拟
键盘，但安卓手机弹出键盘会遮住这个输入框，以至于用户看不见了。苹果手机天然不会喔，苹果手机的键盘弹出来是占了下
面的位置，从而把页面推了上去，整个页面就缩小了就不会出现这样的情况。安卓手机情况如下图：
我不停尝试去解决这个问题，但最终都不成功。
思考一：思考一：
如果能模仿苹果一样，当键盘弹出来的时候，将整个页面缩小成页面底部刚好贴着键盘，那就完美了。但是这个想法最大的问
题就是，不能准确拿到虚拟键盘的高度(后来测试时发现，虚拟键盘原来还可以改变大小……所以这个高度更不可能拿到
了……)，但即使拿到高度，能完成当备注那个textarea onfocus时，键盘弹出并准确计算成整个页面缩小成页面底部刚好贴着
键盘这个效果，还有一个最终大坑！就是没有办法监听到虚拟键盘什么时候被用户收起来！这样一来就不知道什么时候去还原
这个页面了……虽然onblur事件可以在失去焦点时去还原这个页面，但安卓用户的习惯操作应该是按手机上的物理返回键或者
虚拟键盘上的那个收起键盘的按钮，问题是无论返回还是收起键盘，焦点还是在那里，没有失去呀，这就没办法了……所以最
终的问题关键是，怎样监听到虚拟键盘……
思考二：思考二：
尝试了一个方法效果已经很接近了。代码如下：
<div id="fix-hegiht" style="height: 300px; width: 100%; display: none;"></div>
其实就是在文本框onfocus时，把上面这个空白高度的div显示出来，于是就能把页面撑高，就会出现滚动条，效果挺好如下
评论0