安卓H5软键盘遮挡输入框
由于安卓app内嵌入H5页面,webview对于软键盘没有处理(如果不是产品强烈要求建议不要处理这种拆东墙补西墙的问题,因为其他的手机上可能会出现已经优化软键盘的情况)
1.input下方还有多余空位能够提供滚动
那么只需要一句代码就可以处理
setTimeout(function(){ if('scrollIntoView' in document.activeElement) { document.activeElement.scrollIntoView(); } else { document.activeElement.scrollIntoViewIfNeeded(); } },400);
2.input下方没有多余空间给页面滚动到可是区域了(也就是说input在页面最下面并且不是浮动的)
那么我们需要手动插入空白让页面有足够的空间进行1中的滚动
append进去的元素要比scrollIntoView先执行否则不生效(最好有定时器)
下面是完整代码:
var isAndroid = navigator.userAgent.indexOf('Android') > -1 || navigator.userAgent.indexOf('Linux') > -1; if (isAndroid) { //软键盘处理,建议不要处理 var isredundant = false; $('.r-email,.r-code').on('blur', function(){//r-email和r-code是在最底下要处理的input元素 setTimeout(function(){//做定时器是为了要让focus触发后再判断占位元素状态再执行 if (isredundant) { isredundant = false; }else{ $('.redundant_div').css('display','none'); isredundant = false; } }, 100) }) $('input[type="text"],textarea').on('focus', function () { if ($(this).attr('class') == 'r-email' || $(this).attr('class') == 'r-code') { if ($('.redundant_div').length > 0) {//如果之前是已经有插入的占位元素的,那么给出标识,让blur的时候不隐藏占位元素 if ($('.redundant_div').css('display') != 'none') {//如果占位元素在就给状态 isredundant = true; } setTimeout(function(){//这里的定时器要比blur的长否则一直是隐藏的 $('.redundant_div').css('display','block') },150) }else{ $('.personal-data').append('<div class="redundant_div" style="width: 100%;height: 200px;"></div>') setTimeout(function(){ $('.redundant_div').css('display','block') },150) } } setTimeout(function(){ // if (target.scrollIntoViewIfNeeded) { // target.scrollIntoViewIfNeeded(); // } if('scrollIntoView' in document.activeElement) { document.activeElement.scrollIntoView(); } else { document.activeElement.scrollIntoViewIfNeeded(); } },400); }); }
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· C#/.NET/.NET Core优秀项目和框架2025年2月简报
· 一文读懂知识蒸馏
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下