当 textarea 聚焦时,iOS Safari css 位置已修复
Posted
技术标签:
【中文标题】当 textarea 聚焦时,iOS Safari css 位置已修复【英文标题】:iOS Safari css position fixed when textarea is focused 【发布时间】:2016-10-05 12:07:48 【问题描述】:我有一个足够长的简单 html 页面,用户需要滚动页面。我希望在页面底部有一个带有 postion:fixed 的 div,在他里面有一个 textarea。 当用户单击文本区域并出现虚拟键盘时,我希望 div 位置保持在底部,而不是像这张图片中那样位于页面中间:
这是我使用的代码:https://jsfiddle.net/capz19yg/
.inputFixed
position:fixed;
bottom:0px;
right:0px;
width:100%;
height:50px;
background-color:lightgrey;
textarea
height:40px;
width:300px;
position:absolute;
bottom:5px;
right:10px;
padding:0px;
margin:0px;
border:none;
<div class="inputFixed">
<textarea></textarea>
</div>
有解决办法吗?也许一些 javascript 来进行更正?
【问题讨论】:
几个 SO 问题可能重复。详情请见gist.github.com/avesus/…。 【参考方案1】:问题可能与 ios Mobile Safari 中的一个众所周知的错误有关,即滚动/焦点跳跃和固定定位发生的错误。很多人都写过关于它的文章,并且很多人进行了修改或更改了他们的设计以部分解决问题。
作为我的参考,看看:
***: Safari in ios8 is scrolling screen when fixed elements get focus Issues with position fixed & scrolling on iOS Mobile Safari (Whyyyy?!)【讨论】:
以上是关于当 textarea 聚焦时,iOS Safari css 位置已修复的主要内容,如果未能解决你的问题,请参考以下文章
iOS Safari/Chrome - 在模式内聚焦输入时不需要的滚动