OStack程序员社区-中国程序员成长平台

标题: javascript - 当 textarea 聚焦时，iOS Safari css 位置已修复 [打印本页]

---

作者: 菜鸟教程小白    时间: 2022-12-12 22:18
标题: javascript - 当 textarea 聚焦时，iOS Safari css 位置已修复

我有一个足够长的简单 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 来进行更正？

---

Best Answer-推荐答案

也许问题与 iOS Mobile Safari 中的一个众所周知的错误有关，即滚动/焦点跳跃和固定定位发生的错误。很多人都写过关于它的文章，并且很多人进行了修改或更改了他们的设计以部分解决问题。

作为我的引用，看看:

• Stackoverflow: Safari in ios8 is scrolling screen when fixed elements get focus
• Issues with position fixed & scrolling on iOS
• Mobile Safari (Whyyyy?!)

关于javascript - 当 textarea 聚焦时，iOS Safari css 位置已修复，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39873553/

---

欢迎光临 OStack程序员社区-中国程序员成长平台 (https://ostack.cn/)

Powered by Discuz! X3.4