修复了持久标题并滚动到重点输入字段

Posted 2023-02-23

【中文标题】修复了持久标题并滚动到重点输入字段

【英文标题】：Fixed persistent header and scroll to focussed input fields

【发布时间】：2014-05-16 16:24:31

【问题描述】：

问题：基于 iOS7 Safari 中的主屏幕 Web 应用程序的给定示例，我怎样才能实现从不滚动到视图之外的固定持久标题和在点击时滚动到视图中的表单输入字段？强>

这两个例子有一个区别，一个在视口中有height=device-height，另一个没有。

---

没有设备高度

<meta id="viewport" name="viewport" content="user-scalable=no, initial-scale=1, minimum-scale=1" />

演示：http://run.plnkr.co/plunks/SU8Csk/

编辑链接：http://plnkr.co/edit/SU8Csk

优点：点击字段时固定的标题不会改变位置/高度。

坏处：如果不手动滚动或按下“下一步”按钮，用户将无法看到焦点所在的字段。这可能非常乏味，尤其是当字段位于不会溢出的页面上时。

---

带设备高度

<meta id="viewport" name="viewport" content="width=device-width, height=device-height, user-scalable=no, initial-scale=1, minimum-scale=1" />

演示：http://run.plnkr.co/plunks/rPoyaB/

编辑链接：http://plnkr.co/edit/rPoyaB

好处：用户可以根据需要滚动到焦点所在的字段。

坏处： 固定的标题完全滚动到视野之外，这需要始终在屏幕上保持。场景是，它将包含一个应始终可访问的取消按钮和一个保存按钮。此外，当字段模糊时，标题本身看起来会被压扁，直到用户将其向下滚动到视图中，但如果禁用溢出，那么他们甚至不能这样做。

丑陋的：在我不平凡的真实代码中，除了这些简化的示例之外，还有一堆元素绝对定位在标题中以创建曲线“标签”效果，这些对齐完全消失了。

---

您应该能够在 ios7 Safari 中打开每个演示 URL，添加到主屏幕，然后启动以演示问题。

解决这个问题的最佳方法是什么？

注意：我知道 iOS7 Safari 中存在“错误”，尤其是在主屏幕网络应用程序方面，但我相信 解决方法可能与我的方式有关 我正在构建页面。我做了大量的研究（见 下面），但我正在努力寻找解决方案。

“固定标头”问题的相关链接： Need Fixed Header in ios7+, How does one get a fixed header to stay at the top of the page?, Fixed headers with text fields on mobile safari websites, iOS 5 fixed positioning and virtual keyboard, Issues with fixed header, footer and side bar on ipad / iphone, CSS "position: fixed;" on iPad/iPhone?, Fixed positioning in Mobile Safari, How do I stop my fixed navigation from moving like this when the virtual keyboard opens in Mobile Safari?, web app - device-height / keyboard issue, Div element won't stay at the bottom when ios 7 virtual keyboard is present, iOS web app: disable autofocus on input text field, disappearing position fixed header in ios7 mobile safari, http://remysharp.com/2012/05/24/issues-with-position-fixed-scrolling-on-ios/, https://github.com/jquery/jquery-mobile/issues/5532, http://dansajin.com/2012/12/07/fix-position-fixed/

“输入字段不聚焦”问题的相关链接： webkit-overflow-scrolling forms broken on iOS 7 full-screen web app, Issue with iOS 7 Mobile Safari Scroll Events on Keyboard Up and Down, ios7 issues with webview focus when using keyboard html, How do I focus an HTML text field on an iPhone (causing the keyboard to come up)?, Mobile Safari Autofocus text field, iPad browser requires extra tap after appending input, Tapping text input field on iPhone brings up keyboard, but typing will not put in any text, `-webkit-overflow-scrolling: touch` broken for initially offscreen elements in iOS7, http://www.quirksmode.org/blog/archives/2010/09/click_event_del.html, http://calendee.com/ios-7-kills-forms-in-html5-apps/

【问题讨论】：

这是在 phonegap/cordova/sencha 内部还是网络托管的网络应用程序？

后者，所以如果有一个Phonegap设置可以解决这个问题，不幸的是它对我没有帮助。

【参考方案1】：

你应该看看这个答案 - fixed position div freezes on page (iPad)

这是 Brad Frost 的一篇非常好的文章，多年来我自己拼命地阅读了几次，希望能找到解决这个难题的答案。 - https://bradfrost.com/blog/post/fixed-position/

它非常彻底地回答了您的问题。固定定位在手机上坏了，可以用JS按摩，但还没有真正完全固定。

您可以解决一个问题，演示 2 中的“标题故障”只是隐藏在绝对定位的#page 后面的固定标题。将您的标题的 z-index 设置为 1+，这将解决该问题。

当键盘进来时，头部失去定位；我什至不确定这实际上是一个错误，只是浏览器的性质。发生的事情是键盘获得焦点，此时您正在处理 ios 的 UI 而不是 Web 浏览器，并且后台的所有内容都冻结（包括固定定位的元素和所有其他元素）。注意整个屏幕是如何滚动的，这不是网络功能，而是内置的浏览器功能。