Android / IOS 监听软键盘弹起和收起

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
// 判断设备类型
let judgeDeviceType = function () {
    let ua = window.navigator.userAgent.toLocaleLowerCase();
    let isIOS = /iphone|ipad|ipod/.test(ua);
    let isAndroid = /android/.test(ua);

    return {
        isIOS: isIOS,
        isAndroid: isAndroid
    }
}()

// 监听输入框的软键盘弹起和收起事件
function listenKeybord($input) {
    if (judgeDeviceType.isIOS) {
        // IOS 键盘弹起：IOS 和 Android 输入框获取焦点键盘弹起
        $input.addEventListener('focus', function () {
            console.log('IOS 键盘弹起啦！');
            // IOS 键盘弹起后操作
        }, false)

        // IOS 键盘收起：IOS 点击输入框以外区域或点击收起按钮，输入框都会失去焦点，键盘会收起，
        $input.addEventListener('blur', () => {
            console.log('IOS 键盘收起啦！');
            // IOS 键盘收起后操作
        })
    }

    // Andriod 键盘收起：Andriod 键盘弹起或收起页面高度会发生变化，以此为依据获知键盘收起
    if (judgeDeviceType.isAndroid) {
        let originHeight = document.documentElement.clientHeight || document.body.clientHeight;

        window.addEventListener('resize', function () {
            let resizeHeight = document.documentElement.clientHeight || document.body.clientHeight;
            if (originHeight < resizeHeight) {
                console.log('Android 键盘收起啦！');
                // Android 键盘收起后操作
                // 修复小米浏览器下，输入框依旧被输入法遮挡问题
                if (judgeDeviceType.isMiuiBrowser) {
                    document.body.style.marginBottom = '0px';
                }
            }
            else {
                console.log('Android 键盘弹起啦！');
                // Android 键盘弹起后操作
                // 修复小米浏览器下，输入框依旧被输入法遮挡问题
                if (judgeDeviceType.isMiuiBrowser) {
                    document.body.style.marginBottom = '40px';
                }
            }

            originHeight = resizeHeight;
        }, false)
    }
}

let $inputs = document.querySelectorAll('.input');

for (let i = 0; i < $inputs.length; i++) {
    listenKeybord($inputs[i]);
}

弹起软键盘始终让输入框滚动到可视区

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 获取到焦点元素滚动到可视区
function activeElementScrollIntoView(activeElement, delay) {
  let editable = activeElement.getAttribute('contenteditable')

  // 输入框、textarea或富文本获取焦点后没有将该元素滚动到可视区
  if (activeElement.tagName == 'INPUT' || activeElement.tagName == 'TEXTAREA' || editable === '' || editable) {
    setTimeout(function () {
      activeElement.scrollIntoView();
    }, delay)
  }
}
// ---------
// Android 键盘弹起后操作
activeElementScrollIntoView($input, 1000);

唤起纯数字软键盘

1
2
<p>请输入手机号</p>
<input type="tel" novalidate="novalidate" pattern="[0-9]*" class="input">

如果你在用 IOS12 和 V6.7.4+版本的微信浏览器打开表单输入的 demo ，发现键盘收起后，原本被滚动顶起的页面并没有回到底部位置，导致原来键盘弹起的位置“空”了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
console.log('IOS 键盘收起啦！');
// IOS 键盘收起后操作
// 微信浏览器版本6.7.4+IOS12会出现键盘收起后，视图被顶上去了没有下来
let wechatInfo = window.navigator.userAgent.match(/MicroMessenger\/([\d\.]+)/i);
if (!wechatInfo) return;

let wechatVersion = wechatInfo[1];
let version = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/);

if (+wechatVersion.replace(/\./g, '') >= 674 && +version[1] >= 12) {
  setTimeout(function () {
    window.scrollTo(0, Math.max(document.body.clientHeight, document.documentElement.clientHeight));
  })
}

键盘弹起后挡住了输入框

1
2
3
console.log('Android 键盘弹起啦！');
// Android 键盘弹起后操作
activeElementScrollIntoView($input, 1000);
来源：奇舞周刊