美文网首页
H5软键盘兼容方案

H5软键盘兼容方案

作者: 勾起一抹笑容 | 来源:发表于2019-05-10 17:41 被阅读0次

    <!DOCTYPE html>

    <html lang="en">

    <head>

      <meta charset="UTF-8">

      <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

      <meta http-equiv="X-UA-Compatible" content="ie=edge">

      <title>可能这些是你想要的H5键盘兼容方案</title>

      <style>

        html,

        body {

          height: 100%;

        }

        body {

          margin: 0;

          text-align: center;

        }

        .header {

          padding: 20px 0;

          box-shadow: 0 1px 1px #dddddd;

        }

        .content {

          margin-top: 100px;

          margin: 100px 0 80px;

        }

        .content input {

          border-radius: 4px;

          border: 1px solid #dddddd;

          height: 26px;

          line-height: 26px;

        }

        .footer {

          position: fixed;

          left: 0;

          right: 0;

          bottom: 0;

          padding: 20px 0;

          box-shadow: 0 -1px 1px #dddddd;

        }

        .header,

        .footer {

          background-color: #42b983;

          color: #ffffff;

        }

      </style>

    </head>

    <body>

      <header class="header">I am Header</header>

      <div class="content">

        <p>请输入用户名</p>

        <input type="text" class="input">

        <p>请输入手机号</p>

        <input type="tel" novalidate="novalidate" pattern="[0-9]*" class="input">

        <p>请输入密码</p>

        <input type="password" class="input">

        <p>请重新输入密码</p>

        <input type="password" class="input">

      </div>

      <footer class="footer">I am Footer</footer>

      <script>

        // 判断设备类型

        var judgeDeviceType = function () {

          var ua = window.navigator.userAgent.toLocaleLowerCase();

          var isIOS = /iphone|ipad|ipod/.test(ua);

          var isAndroid = /android/.test(ua);

          return {

            isIOS: isIOS,

            isAndroid: isAndroid

          }

        }()

        // 获取到焦点元素滚动到可视区

        function activeElementScrollIntoView(activeElement, delay) {

          var editable = activeElement.getAttribute('contenteditable')

          // 输入框、textarea或富文本获取焦点后没有将该元素滚动到可视区

          if (activeElement.tagName == 'INPUT' || activeElement.tagName == 'TEXTAREA' || editable === '' || editable) {

            setTimeout(function () {

              activeElement.scrollIntoView();

            }, delay)

          }

        }

        // 监听输入框的软键盘弹起和收起事件

        function listenKeybord($input) {

         var scrollTop=0;

          if (judgeDeviceType.isIOS) {

            // IOS 键盘弹起:IOS 和 Android 输入框获取焦点键盘弹起

            $input.addEventListener('focus', function () {

              console.log('IOS 键盘弹起啦!');

              scrollTop=document.body.scrollTop || document.documentElement.scrollTop;

              $inputs[0].value=scrollTop;

            }, false)

            // IOS 键盘收起:IOS 点击输入框以外区域或点击收起按钮,输入框都会失去焦点,键盘会收起,

            $input.addEventListener('blur', () => {

                console.log('IOS 键盘收起啦!');

                var wechatInfo = window.navigator.userAgent.match(/MicroMessenger\/([\d\.]+)/i);

                if (!wechatInfo) return;

                var wechatVersion = wechatInfo[1];

                var version = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/);

                if (+wechatVersion.replace(/\./g, '') >= 674 && +version[1] >= 12) {

                  window.scrollTo(0, Math.max(document.body.clientHeight, document.documentElement.clientHeight));

                }

            })

          }

          // Andriod 键盘收起:Andriod 键盘弹起或收起页面高度会发生变化,以此为依据获知键盘收起

          if (judgeDeviceType.isAndroid) {

            var originHeight = document.documentElement.clientHeight || document.body.clientHeight;

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

              var 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';

                }

                activeElementScrollIntoView($input, 1000);

              }

              originHeight = resizeHeight;

            }, false)

          }

        }

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

        for (var i = 0; i < $inputs.length; i++) {

          listenKeybord($inputs[i])

        }

      </script>

    </body>

    </html>

    参考地址:https://segmentfault.com/a/1190000018959389

    相关文章

      网友评论

          本文标题:H5软键盘兼容方案

          本文链接:https://www.haomeiwen.com/subject/mufzoqtx.html