安卓手机 软键盘挡住了输入框解决方法
问题根源 安卓手机跟苹果手机 获取的body 高度不一样 所以导致了 当软键盘出现的时候 安卓手机上面页面并没有向上滚动,所以就挡住了下面的输入框,这样的用户体验非常不好,最开始写好的页面的时候不会出现这种情况,安卓端用户使用默认的输入法,点击输入框的时候页面会跟着向上移动 ,起初问题出现在 boss的苹果手机搜狗输入法中,软件出现的时候页面没有向上滚。在高质量代码群里面问了,当时就有人说安卓有问题 ,我当时还不信。只是一方面想着解决boss手机上的问题 ,毕竟国内还是挺多人用搜狗的。解决是必须的,花了将近一天的时间在各个群里问了,也百度了,试了好几种都不行。高质量群里的逆天 是个对前端非常热爱,碰到问题都是非常热情帮忙解决。帮我写了一个demo 调试这个挡住的问题。
他一开始的解决思路 就是当输入框获取焦点时 让页面滚动到相应的位置,跟回到顶部的思路差不多,代码如下
//软键盘遮掉输入框处理方法
$("input").focus(function(){
var num = $(this).offset().top-header_h;
$("html,body").animate({scrollTop:num},800);
}); //关键代码
把这段代码加到页面上,一开始会滚动,而且有效果。不知道什么时候莫名其妙在安卓手机效果就没了。而且一动不动。于是乎又是各种百度各种群里发问题。最终还是如最开始逆天所说的安卓软键盘挡住了的问题。按照他的说法就是 安卓手机和苹果手机body或者是外层div高度值不一样。安卓手机body或者是外层高度的高度要重新赋值,安卓手机高度要通过获取window的高度 然后赋值给body或者最外层div 代码如下
var win_h = $(window).height(); //关键代码
$("body").height(win_h); //关键代码
就是这样两句话,就解决了我要解决的问题,这个应该是基础问题,也是经验问题。因为不知道为什么安卓手机软键盘唤起页面不上滚的原因在哪。还有就是最开始使用了获取焦点不滚动为什么不滚动我也不知道原因出现在哪里,不知道跟不跟这个body或者外层div的高度有关系。总而言之,基础还是很薄弱。经验也不丰富。真的要静下心来学习,要多勤快测试测试各种问题。很多时候碰到问题就是束手无策,而且有时候方向都不对,试了又试。以后啊,还是要多学基础,多积累经验。