HTML5键盘弹起遮挡输入框的解决方法

刀哥玩游戏

一、前言：

混合开发中遇到一个问题，有些型号的安卓机和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. }
   
6. /**
   
7.   * @description: 键盘弹起，输入框被遮挡
   
8.   */
   
9. function judgeInput() {
   
10.   if (isIOS()) {
    
11.     window.addEventListener('focusin', function () {
    
12.       console.log(1+document.activeElement.tagName);
    
13.       if (
    
14.         document.activeElement.tagName === 'INPUT' ||
    
15.         document.activeElement.tagName === 'TEXTAREA'
    
16.       ) {
    
17.         setTimeout(function () {
    
18.           document.documentElement.scrollTop = document.body.scrollHeight;
    
19.         }, 0);
    
20.       }
    
21.     });
    
22.   } else {
    
23.     window.addEventListener('resize', function () {
    
24.       console.log(2+ document.activeElement.tagName);
    
25.       if (
    
26.         document.activeElement.tagName === 'INPUT' ||
    
27.         document.activeElement.tagName === 'TEXTAREA'
    
28.       ) {
    
29.         setTimeout(function () {
    
30.           document.activeElement.scrollIntoView();
    
31.         }, 0);
    
32.       }
    
33.     });
    
34.   }
    
35. }
    
36. export {
    
37.   isIOS,
    
38.   judgeInput
    
39. }

复制代码

铛铛铛，实现啦，用的时候直接调用judgeInput()就行
到此这篇关于HTML5键盘弹起遮挡输入框的解决方法的文章就介绍到这了,更多相关h5键盘弹起遮挡输入框内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

阿蒙

666666666666666666

瓦洛克18

同意你的观点，我们有共鸣。

左耳余温1

友善的讨论氛围是非常重要的。

z学

我们一起努力，共同解决问题吧。

DNF君子兰

我想了解更多

EAXWT

我完全同意你的观点

九年国战指挥官

非常感谢你的观点，让我受益良多！

越过913

666666666666

爱夜夜夜夜夜e

非常感谢你的观点，让我受益良多！