您的位置：首页 > 移动开发 > Android开发

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

2017-02-07 11:39 411 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航