广告位联系
返回顶部
分享到

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

html5 来源:互联网 作者:佚名 发布时间:2024-01-05 23:44:51 人浏览
摘要

混合开发中遇到一个问题,有些型号的安卓机和ios机型,输入框唤起键盘后,输入框会被键盘遮挡,需要手动滑动才能漏出来,影响用户体验 二、解决办法: 1.ios和android手机唤起的win

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

二、解决办法:

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

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

三、具体实现过程:

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

// 判断手机 - ios/andriod

function isIOS() {

  const u = navigator.userAgent;

  return !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

}

/**

  * @description: 键盘弹起,输入框被遮挡

  */

function judgeInput() {

  if (isIOS()) {

    window.addEventListener('focusin', function () {

      console.log(1+document.activeElement.tagName);

      if (

        document.activeElement.tagName === 'INPUT' ||

        document.activeElement.tagName === 'TEXTAREA'

      ) {

        setTimeout(function () {

          document.documentElement.scrollTop = document.body.scrollHeight;

        }, 0);

      }

    });

  } else {

    window.addEventListener('resize', function () {

      console.log(2+ document.activeElement.tagName);

      if (

        document.activeElement.tagName === 'INPUT' ||

        document.activeElement.tagName === 'TEXTAREA'

      ) {

        setTimeout(function () {

          document.activeElement.scrollIntoView();

        }, 0);

      }

    });

  }

}

export {

  isIOS,

  judgeInput

}

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


版权声明 : 本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权, 违法违规的内容, 请发送邮件至2530232025#qq.cn(#换@)举报,一经查实,本站将立刻删除。
原文链接 :
相关文章
  • 本站所有内容来源于互联网或用户自行发布,本站仅提供信息存储空间服务,不拥有版权,不承担法律责任。如有侵犯您的权益,请您联系站长处理!
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计