html怎么聚焦输入字段,css – 固定持久标题并滚动到聚焦输入字段

问题：基于iOS7 Safari中的主屏幕网络应用程序的给定示例,如何实现两个固定的永久性标题,从不滚动视图,并在打印时形成滚动到视图中的输入字段？

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

没有设备高度

好：点击字段时,固定标题不会改变位置/高度.

坏：用户无需手动滚动查看聚焦区域,或按下“下一步”按钮.这可能非常繁琐,特别是如果字段位于不溢出的页面上.

具有设备高度

好：用户根据需要滚动到聚焦场.

坏：固定标题完全滚出来,这需要始终保持在屏幕上.该方案是,它将包含一个取消按钮和一个保存按钮,应该始终可以访问.此外,当字段模糊时,标题本身看起来很挤压,直到用户将其向下滚动到视图中,但是如果溢出被禁用,则甚至不能执行此操作.

丑陋的：在我的琐碎,真实的代码上,远离这些简化的例子,有一堆元素绝对位于标题中,以创建一个曲线’tab’效果,它们的对齐完全关闭.

您应该能够打开iOS7 Safari中的每个演示网址,添加到主屏幕,并启动以演示该问题.

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

NOTE: I am aware that there are ‘bugs’ in iOS7 Safari,particularly when it comes to homescreen web apps,however I believe that a

workaround may exist related to how I

am structuring the page. I have done a large amount of research (see

below) but I am struggling to find a solution.

Related links to ‘fixed header’ issue: 07004,07005,

07006,

07007,

07008,

07009,

070010,

070011,

070012,

070013,

070014,070015,

070016,

070017,

070018

Related links to ‘input fields do not focus’ issue: 070019,

070020,

070021,

070022,

070023,

070024,

070025,

070026,

070027,

070028