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

╰+攻爆jí腚メ 2022-12-10 15:00 269阅读 0赞

方案一，通过window的onresize事件，监听窗口变化进行处理

var clientHeight = document.body.clientHeight;
    var _focusElem = null;
    document.body.addEventListener("focus", function(e) { 
        _focusElem = e.target || e.srcElement;
    }, true);
    window.addEventListener("resize", function() { 
        if(_focusElem && document.body.clientHeight < clientHeight) { 
            _focusElem.scrollIntoView(true);
        }
    });

方案二：h5页面嵌入APP内部，onresize事件触发不了，通过onfocus和onblur的方式手动去处理

var winHeight = $(window).height(); //获取当前页面高度
    //键盘弹出之后，页面需要向上滚动的高度
    var addHeight = 0;
    $('input').focus(function(e){ 
    	var thisHeight = $(this).offset()['top'];//获取当前input框距页面顶部的高度
        var u = navigator.userAgent;
        var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
        if(isAndroid){ 
        	if(thisHeight>winHeight/2){ 
        		addHeight = thisHeight - winHeight/2 + 200
        		$('body').height( $('body').height()+addHeight)
            	$('body').scrollTop(addHeight)
        	}
        }
    })
    // 失去焦点时重新回到原来的状态
    $('input').blur(function(e){ 
        var u = navigator.userAgent;
        var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
        if(isAndroid){ 
        	if(addHeight){ 
        		$('body').height( $('body').height()-addHeight)
            	$('body').scrollTop(0)
        	}
        }
    })

发表评论取消回复

表情：

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

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

相关阅读

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

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

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

相关公众号 IOS 键盘弹起卡顿问题、安卓输入框无法弹起问题。

微信公众号弹框问题复现和解决。 1.微信公众号弹框安卓输入框无法弹起问题.。 1.在工作中开发微信公众号页面，遇到了IOS 正常，安卓手机在点击input 后

素颜马尾好姑娘i/ 2023年05月28日 05:08/ 0 赞/ 69 阅读

相关 uniapp textarea 输入框被遮挡问题

问题图片： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLm

布满荆棘的人生/ 2023年01月11日 15:28/ 0 赞/ 406 阅读

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

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

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

相关 input,textarea 被输入框弹起无法回落或者回落之后焦点错位问题解决

废话不说直接上代码很简单： $("input,select").blur(function()\{ setTimeout(function() \{

蔚落/ 2022年09月12日 01:43/ 0 赞/ 184 阅读

相关 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 赞/ 325 阅读

相关输入框只能输入负数,整数,2位小数(键盘弹起事件)

html代码 <input type="text" onkeyup="clearNoNum(this)"> js代码 function clearNoNu

柔情只为你懂/ 2022年02月28日 01:27/ 0 赞/ 321 阅读

相关 uniapp-键盘输入(软盘)弹起后,将输入框遮掉一小半

需要在page.json中配置一下软盘弹出方式即可 "app-plus": { "softinputMode":"adjustResize"

超、凢脫俗/ 2021年09月07日 06:16/ 0 赞/ 1112 阅读

相关 IOS 解决键盘挡住输入框的问题

在iOS开发发现一个问题，有时输入框位于低出时，当编辑输入时，弹出的键盘会挡住输入框，令用户看不清楚实时的输入情况,使界面交互极度不友好。经过查资料终于解决了这个问题...

客官°小女子只卖身不卖艺/ 2021年06月07日 02:06/ 0 赞/ 565 阅读