本文章主要介绍了H5移动端底部input唤醒软键盘遮挡输入框(坑),具有不错的的参考价值,希望对您有所帮助,如解说有误或未考虑完全的地方,请您留言指出,谢谢!
<input type="text" value="" class="tinput"/> 
  
//针对直接在浏览器打开此方法有效 
 $('.tinput').bind('focus', function() { 
            // 软键盘弹起之后再调整滚动条位置 
            if ($(this).offset().top > document.body.scrollHeight / 2) { 
                setTimeout(function () { 
                    window.scrollTo(0,document.body.scrollHeight); 
                }, 500); 
            } 
 }); 
  
//针对嵌入app页面用以下方法 
$('.tinput').focus(function(e){ 
            var u = navigator.userAgent; 
            var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端 
            if(isAndroid){ 
            $('body').height( $('body').height()+300) 
            $('body').scrollTop(300) 
            } 
        }) 
        // 失去焦点时重新回到原来的状态 
        $('.tinput').blur(function(e){ 
            var u = navigator.userAgent; 
            var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端 
            if(isAndroid){ 
            $('body').height( $('body').height()-300) 
            $('body').scrollTop(0) 
            } 
        })

发布评论
IT源码网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

nginx配置按天生成日志文件讲解
你是第一个吃螃蟹的人
发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。