html5 input 键盘 html软键盘

 

最近项目中发现个别Android手机中存在弹出的软键盘会遮挡输入框的现象，最后自己写了一个方法（如下），问题基本解决。

记录下来，防止忘记。有什么不对的地方欢迎指正。O(∩_∩)O

1 //键盘适配
 2 console.log(navigator.platform);
 3 $('input ,textarea').focus(function() {
 4     var keyString = navigator.platform.toLowerCase();
 5     console.log('keyString =' + keyString);
 6     if(!/iphone/.test(keyString)) {
 7         console.log('keyString=' + keyString);
 8         var bottom = $(this).offset().top + $(this).height() - $(window).height();
 9         var space = bottom - $(document).scrollTop();
10         var spaceHeight = $(window).height() / 2.1; //画面移动距离
11 
12         if(Math.abs(bottom) < spaceHeight) {
13             $('body').animate({
14                 'padding-bottom': spaceHeight + 'px'
15             }, function() {
16                 window.scrollTo(0, bottom + spaceHeight + 20);
17             });
18         } else {
19             if(Math.abs(space) < spaceHeight) {
20                 $('body').animate({
21                     'padding-bottom': spaceHeight + 'px'
22                 }, function() {
23                     window.scrollTo(0, bottom + spaceHeight);
24                 });
25 
26             } else {
27                 $('body').animate({
28                     'padding-bottom': fBodyBttom
29                 });
30             }
31         }
32     }
33 
34 });
35 
36 $('input ,textarea').blur(function() {
37     $('body').animate({
38         'padding-bottom': fBodyBttom
39     });
40 });