Jquery Mobile Iscroll Header 在 IOS 中的文本字段中聚焦时隐藏？
Posted
技术标签:
【中文标题】Jquery Mobile Iscroll Header 在 IOS 中的文本字段中聚焦时隐藏？【英文标题】：Jquery Mobile Iscroll Header hiding when focus in text field in IOS? 【发布时间】：2014-03-11 06:13:14 【问题描述】：Jquery Mobile Iscroll Header 在 ios 应用中关注文本字段表单时隐藏。
当键盘出现时如何在焦点到文本字段时制作固定标题。
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Hello World</title>
<link rel="stylesheet" href="js/jquery.mobile-1.4.2.css">
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.mobile-1.4.2.min.js" type="text/javascript">
</script>
<script src="js/iscroll.js" type="text/javascript"></script>
<style type="text/css">
*
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
body
overflow: hidden; /* this is important to prevent the whole page to bounce */
#wrapperGemini
position: absolute;
z-index: 1;
top: 45px;
bottom: 20px;
left: 0;
width: 100%;
overflow: hidden;
#scroller
position: relative;
z-index: 1;
-webkit-tap-highlight-color: rgba(0,0,0,0);
width: 100%;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
-o-text-size-adjust: none;
text-size-adjust: none;
</style>
<script type="text/javascript">
var myScroll;
function loaded ()
myScroll = new IScroll('#wrapperGemini',
scrollbars: true,
mouseWheel: true,
bounce:false
);
document.addEventListener('touchmove', function (e) e.preventDefault(); , false);
</script>
</head>
<body onload="loaded();">
<div data-role="page" >
<!-- data-position="fixed" -->
<div data-role="header" data-position="fixed" data-transition="none" data-tap-toggle="false" data-theme="b" >
<h1>INDEX PAGE</h1>
</div>
<div data-role="content" >
<div id="wrapperGemini" >
<div id="scroller">
<p>some content that will be scrolled</p>
<p>Some more content that will be scrolled</p>
<input type="text" placeholder="1" />
<input type="text" placeholder="2" />
<input type="text" placeholder="3" />
<input type="text" placeholder="4" />
<input type="text" placeholder="5" />
<input type="text" placeholder="6" />
<input type="button" value="GO!!!" />
</div>
</div>
</div>
<div data-role="footer" data-position="fixed" data-transition="none" data-tap-toggle="false" data-theme="b" >
<h1>My Footer</h1>
</div>
</div>
<script type="text/javascript" src="phonegap.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
小键盘出现时如何固定显示标题？
【问题讨论】：
你无法控制它，它隐藏在焦点上以防止在不同平台上发生其他可能的崩溃。 这个问题与Worklight无关；在 Worklight 中，您不使用“index.js”或“phonegap.js”，并且您的 HTML 缺少各种与 Worklight 相关的框架引用。一旦这个 HTML 符合 Worklight 应用程序的样子，就添加标签。 我已经在这里@IdanAdar通过代码提交 【参考方案1】：我的建议是使用iScroll 来解决这个问题
位置：已修复在 iOS 上无法正常播放 - Check it
查看这些 SO 问题以供参考！
CSS “position: fixed;” into iPad/iPhone?
Fixed positioning in Mobile Safari
【讨论】：
以上是关于Jquery Mobile Iscroll Header 在 IOS 中的文本字段中聚焦时隐藏？的主要内容，如果未能解决你的问题，请参考以下文章