安卓系统点击input和textarea框被软键盘破坏布局问题（解决）

最新推荐文章于 2025-09-07 15:55:13 发布

原创最新推荐文章于 2025-09-07 15:55:13 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

前端技术同时被 2 个专栏收录

13 篇文章

订阅专栏

思考

10 篇文章

订阅专栏

先看下问题，直接上图!
问题产生图片
在ios系统即苹果手机看到的并不会产生这样的问题布局基本OK，但是一到安卓
手机测试就遇到这个麻烦的问题！！

解决办法：

首先得在相应得页面得js加上这几行代码

/*输入框失焦置顶*/
$(function(){
	$("input-box,input,textarea").blur(function(){
		$(document).scrollTop($(window).height())
	});
})
/*安卓机软键盘处理*/
$(function() {
	$('.prizeListBg').height($('.prizeListBg')[0].clientHeight);
})

然后就必须重写页面了，把所有得布局改成相对位置布局（position:relative）
注意的是，写样式的时候，个别父级要设定最小样式

看下效果，下图能够正常显示了
解决了问题的效果图
以下是大致的前后修改style样式的css文件的前后对比
在这里插入图片描述

在这里插入图片描述
如果要处理底部按钮被软键盘顶上去的情况，请参考下面代码：

稍微总结一下：对于安卓机输入框软键盘破坏布局的现象，大部分原因是页面用了高度100vh或者100%设置，按钮用了绝对定位造成的！！针对问题解决方可有效！

参考链接：https://blog.youkuaiyun.com/chendawen250/article/details/78604039
参考链接：https://www.jb51.net/article/100120.htm
参考链接：https://blog.youkuaiyun.com/a419419/article/details/78214445
参考链接：https://zhidao.baidu.com/question/392225517378587085.html
参考链接：https://blog.youkuaiyun.com/qq_33769914/article/details/78062685

分享一下以上找百度看到的有帮助我解决该问题的链接，对你有帮助的请留言点个赞！！