absolute定位元素被输入法输入框顶起

2015-12-02 05:54:15 2.6k 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

iOS H5输入框被键盘顶起？3种解决方案实测对比（附代码）本文针对iOS H5开发中键盘遮挡输入框的经典难题，深入剖析了iOS与Android WebView处理键盘事件的机制差异，并实测对比了三种主流解决方案：动态计算与绝对定位、Visual Viewport API以及混合开发中的桥接原生方案。文章提供了详细的代码示例和选型建议，帮助开发者根据项目场景选择最佳方案，有效提升移动端H5页面的交互体验。阅读详情

我用absolute定位页面底部一个logo，页面有input框，当点击input弹出输入法输入框的时候，底部绝对定位的logo被输入框顶起来了（ios端正常），有没有啥解决方式？

...全文

移动端H5开发中，fixed/absolute定位元素因键盘弹起而错位的兼容性修复方案本文深入分析了移动端H5开发中，fixed/absolute定位元素因键盘弹起而错位的兼容性问题。通过剖析键盘与视口的交互原理，提供了基于resize事件监听和Visual Viewport API的核心解决方案，并分享了处理多输入框、选择隐藏或位移模式等实战技巧与避坑指南，有效解决安卓与iOS上的布局兼容性难题。阅读详情

namelesswei

CSS 61,116 成员 60,701 内容

+ 关注 + 加入社区

切换为时间正序

wanderingLight 2019-03-18

打赏
举报

谢谢,只能通过聚焦和失焦解决啦~

不可want语 2018-12-21

打赏
举报

聚焦隐藏失焦显示

風灬雲 2018-10-08

打赏
举报

你的情况应该是页面高度没有屏幕高度大吧；所以用了height:100%；定位到底部；
手机按键出来的时候相当于浏览器的resize;100%就只有那么高，所以会这样；
可以试试input获取焦点的时候隐藏logo；失去焦点的时候再显示logo

weixin_42450613 2018-08-09

打赏
举报

你这个是因为高度的100%导致的所以js加一句就完美搞定
$(document).ready(function () { $('.index').css({'height':$(window).height()})});

misaka去年夏天 2015-12-03

打赏
举报

给出你的代码。。。。

namelesswei 2015-12-03

打赏
举报

@以专业开发人员为伍 @misaka去年夏天 @xuzuning

KK3K2005 2015-12-03

打赏
举报

应该是没有定义height bottom:10%; 是相对于什么的10%呢？ . html,body ,.index{ height:100% }

namelesswei 2015-12-03

打赏
举报

引用 6 楼 qq_24442963 的回复:

这个我有碰到过。在input输入框那里添加获得焦点事件和失去焦点事件，获取焦点则修改.logo的position属性为fixed，失去焦点改为absolute，这样就可以了。可以写style: .logo{} .logoFocus{} 获取焦点时，把class的logo移除，添加logoFocus，失去焦点反之，实现起来简单一点。希望能帮到你。

差不多也只能这样了

namelesswei 2015-12-03

打赏
举报

引用 5 楼 u011376884 的回复:

不用absolute定位不就行了

不用absolute，我用margin-top 百分比不用分辨率手机效果不一样，没办法

qq_24442963 2015-12-03

打赏
举报

这个我有碰到过。在input输入框那里添加获得焦点事件和失去焦点事件，获取焦点则修改.logo的position属性为fixed，失去焦点改为absolute，这样就可以了。可以写style: .logo{} .logoFocus{} 获取焦点时，把class的logo移除，添加logoFocus，失去焦点反之，实现起来简单一点。希望能帮到你。

逝_去_的_光_阴 2015-12-03

打赏
举报

不用absolute定位不就行了

misaka去年夏天 2015-12-03

打赏
举报

输入法把整个页面顶起来了，不知道怎么解决。。。发到HTML版块去问问吧

namelesswei 2015-12-03

打赏
举报

引用 2 楼 misakaqunianxiatian 的回复:

给出你的代码。。。。

<!doctype html>
<html>
	<head>
		<title>123</title>
		<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
		<meta content="yes" name="apple-mobile-web-app-capable" />
        <meta content="black" name="apple-mobile-web-app-status-bar-style" />
        <meta content="telephone=no" name="format-detection" />
	</head>
	<body onclick="">
		<style>
			.index{
				width:100%;
				overflow:hidden;
			}
			.logo{
				position:absolute;
				bottom:10%;
				width:100px;				
			}
			.logo img{
				width:100%;
				display:block;
			}
		</style>
		<div class="index">
			<div><input type="text"></div> 
 			<div class="logo">
 				<img src="http://m.baidu.com/static/index/plus/plus_logo.png">
 			</div>
		</div>
 
	</body>
</html>

你用微信打开这个页面，点击输入框就可以看到效果

absolute定位元素被输入法输入框顶起

相关推荐