解决移动端输入法遮盖input输入框的问题…

最新推荐文章于 2023-05-15 11:29:43 发布

一个有思想的新时代农民工

最新推荐文章于 2023-05-15 11:29:43 发布

阅读量1.1w

点赞数

分类专栏：移动端文章标签：移动端

移动端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一般的原生的系统里面并没有这个bug，但是第三方往往会出现
解决办法原理是通过给body添加scrollTop，把input的位置挪到最上面就可以了，
另一种通用方法是使用fixed定位到顶部，是可以解决，但是下面的内容会暴露出来，虽然通过嵌套一层能解决，而且脱离文档流，可能有样式问题，无疑又麻烦了,下面是真的第一种办法解决的demo

<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Examples</title>
    <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" name="viewport">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link href="" rel="stylesheet">
<style type="text/css">
    *{margin:0px; padding: 0px;}
    body,html{ padding: 5px;}
    .scrollDiv{width: 100%;height: 900px;background: #ccc;font-size: 24px;padding-top: 40px; text-align: center;}
    input{-webkit-appearance: none;width: 100%; display: block;margin:10px auto; border-radius: 0px;font-size: 16px; padding: 12px 10px;box-sizing:border-box;box-shadow: none;border:1px solid #666; }
</style></head>

<body style="">
    <div class="main">
        <div class="scrollDiv">滑到最下面</div>
        <input type="text" placeholder="点击我" id="inp">
    </div>

<script type="text/javascript">

var inp = document.querySelector('#inp'); 
var bodyHeight =  document.body.offsetHeight ; 
inp.onclick = function(ev){
    document.querySelector('body').style.height = '9999px';
    setTimeout(function(){
        document.body.scrollTop = document.documentElement.scrollTop = inp.getBoundingClientRect().top + pageYOffset -5;
    },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>
</body>
</html>

点击查看原文
 点击查看在线demo

一个有思想的新时代农民工

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
解决移动端输入法遮盖input输入框的问题…

一般的原生的系统里面并没有这个bug，但是第三方往往会出现解决办法原理是通过给body添加scrollTop，把input的位置挪到最上面就可以了，另一种通用方法是使用fixed定位到顶部，是可以解决，但是下面的内容会暴露出来，虽然通过嵌套一层能解决，而且脱离文档流，可能有样式问题，无疑又麻烦了,下面是真的第一种办法解决的demo<html><head> <meta charset
复制链接

扫一扫