h5键盘弹起遮挡输入框的处理

一、前言：

混合开发中遇到一个问题，有些型号的安卓机和ios机型，输入框唤起键盘后，输入框会被键盘遮挡，需要手动滑动才能漏出来，影响用户体验

二、解决办法:

1.ios和android手机唤起的windows事件不一样，要分别处理

2.document.body.scrollTop无效，可以用document.documentElement.scrollTop替换

三、具体实现过程：

1. // 判断手机 - ios/andriod
2. function isIOS() {
3. const u = navigator.userAgent;
4. return !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
5. }
7. /**
8. * @description: 键盘弹起，输入框被遮挡
9. */
10. function judgeInput() {
11. if (isIOS()) {
12. window.addEventListener('focusin', function () {
13. console.log(1+document.activeElement.tagName);
14. if (
15. document.activeElement.tagName === 'INPUT' ||
16. document.activeElement.tagName === 'TEXTAREA'
17. ) {
18. setTimeout(function () {
19. document.documentElement.scrollTop = document.body.scrollHeight;
20. }, 0);
22. }
23. });
24. } else {
25. window.addEventListener('resize', function () {
26. console.log(2+ document.activeElement.tagName);
27. if (
28. document.activeElement.tagName === 'INPUT' ||
29. document.activeElement.tagName === 'TEXTAREA'
30. ) {
31. setTimeout(function () {
32. document.activeElement.scrollIntoView();
33. }, 0);
34. }
35. });
36. }
37. }
38. export {
39. isIOS,
40. judgeInput
41. }

 铛铛铛，实现啦，用的时候直接调用judgeInput()就行