h5页面输入框在安卓手机上被键盘挡住

最新推荐文章于 2024-03-08 14:38:53 发布

csdn_sf

最新推荐文章于 2024-03-08 14:38:53 发布

阅读量1.9k

点赞数 1

文章标签：输入框被挡住安卓手机软键盘挡住input h5页面手机端挡输入框

本文链接：https://blog.csdn.net/csdn15026798451/article/details/83147077

版权

h5页面输入框在安卓手机上被键盘挡住

1.弹窗的解决方法
.floatbox{position:absolute; top:50%; right:0; bottom:0; left:0; background:rgba(0,0,0,0.5);}
.floatbox>div{position:absolute; top:50%;  transform: translate(0,-50%); -webkit-transform: translate(0,-50%); max-height:80%; overflow-y:auto; background:#fff; border-radius:5px;}

//获取原窗口的高度
var originalHeight=document.documentElement.clientHeight ||document.body.clientHeight;
window.onresize=function(){
   //键盘弹起与隐藏都会引起窗口的高度发生变化
      var resizeHeight=document.documentElement.clientHeight || document.body.clientHeight;
       if(resizeHeight-0<originalHeight-0){
        //当软键盘弹起，在此处操作
   $("#hidden").addClass("floatbox");

        }else{
        //当软键盘收起，在此处操作
      $("#hidden").removeClass("floatbox");

        }
}
----------------
2.整个页面上移：
var h = window.innerHeight;
var myInput = document.getElementById('myInput');//input框的id

myInput.addEventListener('focus',handler,false);

function handler(){
   $('body').height(h);
}
效果图：
![在这里插入图片描述](https://img-blog.csdn.net/20181018151843387?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzZG4xNTAyNjc5ODQ1MQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)