使用滚动视图组件后无法在文本字段中输入文本
我在 jQuery Mobile 应用程序中使用滚动视图。但是当我使用它时，文本字段无法获得正确的焦点，因此我无法在其中输入值。
这是我的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://jquerymobile.com/test/css/themes/default/" />
<link rel="stylesheet" href="http://jquerymobile.com/test/experiments/scrollview/jquery.mobile.scrollview.css" />
<link rel="stylesheet" href="http://jquerymobile.com/test/docs/_assets/css/jqm-docs.css"/>
<style>
.ui-content.ui-scrollview-clip {
padding: 0;
}
.ui-content.ui-scrollview-clip > div.ui-scrollview-view {
margin: 0;
padding: 15px;
}
.ui-content.ui-scrollview-clip > .ui-listview.ui-scrollview-view {
margin: 0;
}
</style>
<script src="http://jquerymobile.com/test/js/jquery.js"></script>
<script src="http://jquerymobile.com/test/js"></script>
<script src="http://jquerymobile.com/test/experiments/scrollview/jquery.easing.1.3.js"></script>
<script src="http://jquerymobile.com/test/experiments/scrollview/jquery.mobile.scrollview.js"></script>
<script src="http://jquerymobile.com/test/experiments/scrollview/scrollview.js"></script>
<script src="http://jquerymobile.com/test/docs/lists/docs/docs.js"></script>
</head>
<body >
<div data-role="page" class="page" id="home" >
<div data-role="header">
<h1>Sample</h1>
</div><!-- /header -->
<div data-role="content">
<div data-role="fieldcontain">
<label for="tf">Name</label>
<input type="text" name="tf" id="tf" />
</div>
<div data-role="fieldcontain">
<label for="ta">Address</label>
<textarea name="ta" id="ta" rows="5" cols="10"></textarea>
</div
</div><!-- /content -->
</div>
</body>
您可以在此处查看示例 - http://jsfiddle.net/uzJW4/
我在这里获得了一些相关信息- http://jquerymobile.com/test/experiments/scrollview/sv-test-02.html。但无法真正弄清楚该怎么做才能使其在我的情况下发挥作用。
对此问题的任何帮助将不胜感激。
I am using scrollview in my jQuery Mobile application.But when I use it,the textfields cannot receive proper focus and as a result I am not able to type values into them.
This is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://jquerymobile.com/test/css/themes/default/" />
<link rel="stylesheet" href="http://jquerymobile.com/test/experiments/scrollview/jquery.mobile.scrollview.css" />
<link rel="stylesheet" href="http://jquerymobile.com/test/docs/_assets/css/jqm-docs.css"/>
<style>
.ui-content.ui-scrollview-clip {
padding: 0;
}
.ui-content.ui-scrollview-clip > div.ui-scrollview-view {
margin: 0;
padding: 15px;
}
.ui-content.ui-scrollview-clip > .ui-listview.ui-scrollview-view {
margin: 0;
}
</style>
<script src="http://jquerymobile.com/test/js/jquery.js"></script>
<script src="http://jquerymobile.com/test/js"></script>
<script src="http://jquerymobile.com/test/experiments/scrollview/jquery.easing.1.3.js"></script>
<script src="http://jquerymobile.com/test/experiments/scrollview/jquery.mobile.scrollview.js"></script>
<script src="http://jquerymobile.com/test/experiments/scrollview/scrollview.js"></script>
<script src="http://jquerymobile.com/test/docs/lists/docs/docs.js"></script>
</head>
<body >
<div data-role="page" class="page" id="home" >
<div data-role="header">
<h1>Sample</h1>
</div><!-- /header -->
<div data-role="content">
<div data-role="fieldcontain">
<label for="tf">Name</label>
<input type="text" name="tf" id="tf" />
</div>
<div data-role="fieldcontain">
<label for="ta">Address</label>
<textarea name="ta" id="ta" rows="5" cols="10"></textarea>
</div
</div><!-- /content -->
</div>
</body>
You can see a sample here - http://jsfiddle.net/uzJW4/
I got some information on this here - http://jquerymobile.com/test/experiments/scrollview/sv-test-02.html. But could not really figure out what to do to make it work in my case.
Any help in this matter will be greatly appreciated.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
虽然这个问题是关于 iScroll4，解决方案应该仍然相同，因为 iScroll 和 jquery mobiles 实验性滚动视图使用相同的滚动解决方法。
While this question is about iScroll4, the solution should still be the same since both iScroll and jquery mobiles experimental scrollview use the same workaround for the scrolling.