菜鸟教程小白 发表于 2022-12-12 22:18:42

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;
    }


&lt;div class=&#34;inputFixed&#34;&gt;
    &lt;textarea&gt;&lt;/textarea&gt;
&lt;/div&gt;
</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 &amp; 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]
查看完整版本: javascript - 当 textarea 聚焦时,iOS Safari css 位置已修复