H5移动端底部input唤醒软键盘遮挡输入框解决办法

Dear 丶 2022-02-01 14:31 705阅读 0赞

<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)
                }
            })

发表评论取消回复

表情：

评论列表（有 0 条评论，705人围观）

还没有评论，来说两句吧...

相关阅读

相关 ios移动端软键盘收起后input输入框焦点错位或无法输入解决

本文为开发中遇到的问题解决方案总结：ios移动端软键盘收起后input输入框焦点错位或无法输入解决问题描述：页面背后是可滚动的列表，前面是弹出框，里面有需要...

梦里梦外;/ 2024年04月19日 11:40/ 0 赞/ 114 阅读

相关 ios移动端input输入框常见问题解决办法

1、ios端兼容input光标高度问题详情描述：input输入框光标，在安卓手机上显示没有问题，但是在苹果手机上当点击输入的时候，光标的高度和父盒子的高度一样。例如

怼烎@/ 2023年07月19日 04:48/ 0 赞/ 31 阅读

相关解决安卓软键盘弹起遮挡输入框的问题

解决安卓软键盘弹起遮挡输入框的问题在开发微信网页的时候,遇到的问题.调试工具查看效果时并没有问题,打包发布时问题就出现了,安卓机型并没有对光标锁定输入框时,做出让输入框

梦里梦外;/ 2023年06月18日 08:56/ 0 赞/ 371 阅读

相关移动端input框阻止键盘唤起

1. <input type="text" readonly /> 2. <input type="text" @focus='blur'/>

￡神魔★判官ぃ/ 2022年12月30日 03:40/ 0 赞/ 180 阅读

相关解决输入框被键盘弹起遮挡问题

方案一，通过window的onresize事件，监听窗口变化进行处理 var clientHeight = document.body.clientHeight;

╰+攻爆jí腚メ/ 2022年12月10日 15:00/ 0 赞/ 269 阅读

相关 h5键盘遮挡输入框

1. h5嵌入到原生时，输入框获取焦点会调起键盘，如果不作处理键盘有可能会遮挡住输入框。不引入插件前提下的解决方案大多是这两种：scrollintoviewif

刺骨的言语ヽ痛彻心扉/ 2022年06月17日 13:52/ 0 赞/ 295 阅读

相关移动端手机软键盘遮挡输入框问题

页面: <section class="links"> <h3 class="title">联系方式</h3> <div class=

今天药忘吃喽~/ 2022年05月29日 11:52/ 0 赞/ 324 阅读

相关移动端调起软键盘遮盖input

function pushKey() { let target = this; setTimeout(function() { targ

╰半夏微凉°/ 2022年05月08日 09:03/ 0 赞/ 267 阅读

相关 H5移动端底部input唤醒软键盘遮挡输入框解决办法

<input type="text" value="" class="tinput"/> //针对直接在浏览器打开此方法有效 $('.tin

Dear 丶/ 2022年02月01日 14:31/ 0 赞/ 706 阅读

相关安卓Android系统，H5页面键盘弹出后，页面挤压变形或者底部输入框被遮挡的解决办法

键盘弹出挤压页面至变形如下页面，背景图片height: 100%; 底部输入框部分用position:absolute定位，当键盘弹出时，页面整体被挤压； ![在这

清疚/ 2021年11月04日 18:54/ 0 赞/ 1928 阅读