当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 安卓和ios键盘挡住输入内容

安卓和ios键盘挡住输入内容

2018年08月04日  | 移动技术网IT编程  | 我要评论 
<script>
let iosUser = window.navigator.userAgent.indexOf('iPhone')
let inp = document.querySelector('#inp');//input输入框
if (iosUser != -1) {
  var bfscrolltop = document.body.scrollTop;//获取软键盘唤起前浏览器滚动部分的高度
  inp.focus(function () {//在这里‘input.inputframe’是我的底部输入栏的输入框，当它获取焦点时触发事件
    interval = setInterval(function () {//设置一个计时器，时间设置与软键盘弹出所需时间相近
      document.body.scrollTop = document.body.scrollHeight;//获取焦点后将浏览器内所有内容高度赋给浏览器滚动部分高度
    }, 100)
  }).blur(function () {//设定输入框失去焦点时的事件
    clearInterval(interval);//清除计时器
    document.body.scrollTop = bfscrolltop;//将软键盘唤起前的浏览器滚动部分高度重新赋给改变后的高度
  });
} else {
  inp.onclick = function (ev) {
    document.querySelector('body').style.height = '999px';
    inp.style.position = 'static';
    setTimeout(function () {
      document.body.scrollTop = document.documentElement.scrollTop = inp.getBoundingClientRect().top + pageYOffset - 300;
    }, 50);
    window.addEventListener('touchmove', fn, false);
  }

  inp.onblur = function () {
    document.querySelector('body').style.height = "auto"
    document.querySelector('body').removeAttribute('style')
    window.removeEventListener('touchmove', fn, false)
  }

  //触摸取消blur
  function fn(ev) {
    var _target = ev.target || ev.srcElement;
    if (_target.nodeName != 'INPUT') {
      inp.blur();
    }
    ev.preventDefault()
  }
}
</script>

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网