1、序言:

混折开辟外遇见一个答题,有些型号的安卓机以及ios机型,输出框唤起键盘后,输出框会被键盘遮挡,须要脚动滑动才气漏进去,影响用户体验

两、拾掇法子:

1.ios以及android脚机唤起的windows变乱纷歧样,要别离措置

两.document.body.scrollTop合用,否以用document.documentElement.scrollTop改换

3、详细完成历程:

// 剖断脚机 - 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(两+ document.activeElement.tagName);
      if (
        document.activeElement.tagName === 'INPUT' ||
        document.activeElement.tagName === 'TEXTAREA'
      ) {
        setTimeout(function () {
          document.activeElement.scrollIntoView();
        }, 0);
      }
    });
  }
}
export {
  isIOS,
  judgeInput
}

 当当铛,完成啦,用的时辰间接挪用judgeInput()便止

到此那篇闭于HTML5键盘弹起遮挡输出框的牵制办法的文章便先容到那了,更多相闭h5键盘弹起遮挡输出框形式请搜刮剧本之野之前的文章或者延续涉猎上面的相闭文章,心愿大师之后多多撑持剧本之野!

点赞(9) 打赏

评论列表 共有 0 条评论

暂无评论

微信小程序

微信扫一扫体验

立即
投稿

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部