javascript - 当 textarea 聚焦时,iOS Safari css 位置已修复
<p><p>我有一个足够长的简单 html 页面,用户需要滚动页面。我希望在页面底部有一个带有 postion:fixed 的 div,在他里面有一个 textarea。
当用户单击文本区域并出现虚拟键盘时,我希望 div 位置保持在底部,而不是像这张图片中那样位于页面中间:<a href="/image/gQuqH.png" rel="noreferrer noopener nofollow"><img src="/image/gQuqH.png" alt="enter image description here"/></a> </p>
<p>这是我使用的代码:<a href="https://jsfiddle.net/capz19yg/" rel="noreferrer noopener nofollow">https://jsfiddle.net/capz19yg/</a> </p>
<pre><code> .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>
</code></pre>
<p>有解决办法吗?也许一些 javascript 来进行更正?</p></p>
<br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
<p><p>也许问题与 iOS Mobile Safari 中的一个众所周知的错误有关,即滚动/焦点跳跃和固定定位发生的错误。很多人都写过关于它的文章,并且很多人进行了修改或更改了他们的设计以部分解决问题。</p>
<p>作为我的引用,看看:</p>
<ul>
<li> <a href="https://stackoverflow.com/questions/29001977/safari-in-ios8-is-scrolling-screen-when-fixed-elements-get-focus" rel="noreferrer noopener nofollow">Stackoverflow: Safari in ios8 is scrolling screen when fixed elements get focus</a> </li>
<li> <a href="https://remysharp.com/2012/05/24/issues-with-position-fixed-scrolling-on-ios" rel="noreferrer noopener nofollow">Issues with position fixed & scrolling on iOS</a> </li>
<li> <a href="https://www.eventbrite.com/engineering/mobile-safari-why/" rel="noreferrer noopener nofollow">Mobile Safari (Whyyyy?!)</a> </li>
</ul></p>
<p style="font-size: 20px;">关于javascript - 当 textarea 聚焦时,iOS Safari css 位置已修复,我们在Stack Overflow上找到一个类似的问题:
<a href="https://stackoverflow.com/questions/39873553/" rel="noreferrer noopener nofollow" style="color: red;">
https://stackoverflow.com/questions/39873553/
</a>
</p>
页:
[1]