jquery手机隐藏固定页脚键盘时

Question

jquery手机隐藏固定页脚键盘时

use*_*395 9 keyboard mobile jquery footer hide

在我的iPhone上,我希望在按下文本字段并显示键盘时隐藏页脚.现在它只是将自己定位在键盘上方,显示的网站太少了.

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

Ric*_*ard 9

这是一个"正确"的难题.您可以尝试在输入元素焦点上隐藏页脚,并在模糊时显示,但在iOS上并不总是可靠.每隔一段时间(十次,例如,在我的iPhone 4S上),焦点事件似乎无法触发(或者可能是JQuery Mobile存在竞争条件),并且页脚不会被隐藏.

经过多次试验和错误,我想出了这个有趣的解决方案:

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

Run Code Online (Sandbox Code Playgroud)

基本上:使用JavaScript确定设备的窗口高度,然后动态创建CSS媒体查询,以在窗口高度缩小10个像素时隐藏页脚.因为打开键盘会调整浏览器显示的大小,所以在iOS上永远不会失败.因为它使用的是CSS引擎而不是JavaScript,所以它更快更顺畅!

注意:我发现使用'visibility:hidden'比'display:none'或'position:static'更少,但你的里程可能会有所不同.

归档时间：	12 年，6 月前
查看次数：	10185 次
最近记录：	7 年，4 月前