jquery mobile在键盘时隐藏固定页脚 [英] jquery mobile hide fixed footer when keyboard
问题描述
在我的 iPhone 上，我希望在按下文本字段并出现键盘时隐藏页脚.现在它只是将自己定位在键盘上方，网站显示的太少了.
<div data-role="navbar"><div data-role="controlgroup" data-type="vertical"><ul><li><input data-iconpos="top" data-icon='plus' type="button" value="Tur" id='nyTur'/></li><li><input data-iconpos="top" data-icon='plus' type="button" value="48%" id='ny48'/></li><li><input data-iconpos="top" data-icon='plus' type="button" value="100%" id='ny100'/></li></div><!--/navbar --></div><!--/footer -->
这是一个很难正确"解决的问题.您可以尝试在输入元素焦点上隐藏页脚，并在模糊时显示，但这在 iOS 上并不总是可靠的.每隔一段时间(例如，在我的 iPhone 4S 上，十分之一)焦点事件似乎无法触发(或者 JQuery Mobile 可能存在竞争条件)，并且页脚没有被隐藏.
经过多次反复试验，我想出了这个有趣的解决方案:
...各种 JS 和 CSS 导入...<script type="text/javascript">document.write('<style>#footer{visibility:hidden}@media(min-height:' + ($( window ).height() - 10) + 'px){#footer{visibility:visible}}</style>' );本质上:使用 JavaScript 来确定设备的窗口高度，然后在窗口高度缩小 10 像素时动态创建 CSS 媒体查询以隐藏页脚.因为打开键盘会调整浏览器显示的大小，所以这在 iOS 上永远不会失败.因为它使用的是 CSS 引擎而不是 JavaScript，所以它也更快更流畅！
注意:我发现使用 'visibility:hidden' 比使用 'display:none' 或 'position:static' 故障少，但您的里程可能会有所不同.
On my iPhone, I want the footer to be hidden when a text field is pushed and the keyboard appears. Right now it's just positioning itself above the keyboard and too little of the website is shown.
<div data-role="footer" data-id="foo1" data-position="fixed">
<div data-role="navbar">
<div data-role="controlgroup" data-type="vertical">
<ul><li><input data-iconpos="top" data-icon='plus' type="button" value="Tur" id='nyTur' /></li>
<li><input data-iconpos="top" data-icon='plus' type="button" value="48%" id='ny48' /></li>
<li><input data-iconpos="top" data-icon='plus' type="button" value="100%" id='ny100' /></li>
</ul>
</div>
</div><!-- /navbar -->
</div><!-- /footer -->
This is a difficult problem to get 'right'. You can try and hide the footer on input element focus, and show on blur, but that isn't always reliable on iOS. Every so often (one time in ten, say, on my iPhone 4S) the focus event seems to fail to fire (or maybe there is a race condition with JQuery Mobile), and the footer does not get hidden.
After much trial and error, I came up with this interesting solution:
<head>
...various JS and CSS imports...
<script type="text/javascript">
document.write( '<style>#footer{visibility:hidden}@media(min-height:' + ($( window ).height() - 10) + 'px){#footer{visibility:visible}}</style>' );
</script>
</head>
Essentially: use JavaScript to determine the window height of the device, then dynamically create a CSS media query to hide the footer when the height of the window shrinks by 10 pixels. Because opening the keyboard resizes the browser display, this never fails on iOS. Because it's using the CSS engine rather than JavaScript, it's much faster and smoother too!
Note: I found using 'visibility:hidden' less glitchy than 'display:none' or 'position:static', but your mileage may vary.
这篇关于jquery mobile在键盘时隐藏固定页脚的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
