使用滚动视图组件后无法在文本字段中输入文本答案

【问题标题】：Cannot type text into textfields after using scrollview component使用滚动视图组件后无法在文本字段中输入文本
【发布时间】：2011-10-19 13:40:23
【问题描述】：

我在我的 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。但无法真正弄清楚该怎么做才能使它在我的情况下起作用。

我们将不胜感激在此问题上的任何帮助。

【问题讨论】：

不确定这是否与问题有关，但我收到此页面的 404：jquerymobile.com/test/docs/lists/docs/docs.js
无论如何都不需要那个js。即使它不存在，问题也存在。复制粘贴来自scrollview演示应用程序的代码来说明问题。 :):)

标签： jquery html css jquery-mobile scrollview

【解决方案1】：

虽然this question 是关于 iScroll4，但解决方案应该仍然相同，因为 iScroll 和 jquery mobiles 实验性滚动视图使用相同的解决方法进行滚动。

【讨论】：