最近项目中发现个别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 });