欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

移动端底部input唤醒手机软键盘遮挡输入框问题

程序员文章站 2022-03-18 10:57:41
//针对直接在浏览器打开此方法有效 $('.tinput').bind('focus', function() { // 软键盘弹起之后再调整滚动条位置 if ($(this).offset().top > document.body.scrollHeight / 2) { setTimeout(function (...
<input type="text" value="" class="btninput"/>
 
//针对直接在浏览器打开此方法
 $('.btninput').bind('focus', function() {
            // 软键盘弹起之后再调整滚动条位置
            if ($(this).offset().top > document.body.scrollHeight / 2) {
                setTimeout(function () {
                    window.scrollTo(0,document.body.scrollHeight);
                }, 500);
            }
 });
 
//针对嵌入app页面使用
$('.btninput').focus(function(e){
            var u = navigator.userAgent;
            var Android = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
            if(Android){
            $('body').height( $('body').height()+300)
            $('body').scrollTop(300)
            }
        })
        // 失去焦点时重新回到原来的状态
        $('.btninput').blur(function(e){
            var u = navigator.userAgent;
            var Android = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
            if(Android){
            $('body').height( $('body').height()-300)
            $('body').scrollTop(0)
            }
        })

本文地址:https://blog.csdn.net/zhaoxl0210/article/details/107084383