首页 > 移动平台 > 详细

钉钉开发笔记(5)android系统中html软键盘的适配

时间:2017-02-07 12:42:12      阅读:401      评论:0      收藏:0      [点我收藏+]

 

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

 

钉钉开发笔记(5)android系统中html软键盘的适配

原文:http://www.cnblogs.com/tig666666/p/6373426.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!