Невозможно ввести текст в текстовые поля после использования компонента scrollview - PullRequest
Новая
       24

Невозможно ввести текст в текстовые поля после использования компонента scrollview

0 голосов
/ 19 октября 2011

Я использую scrollview в своем приложении 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. Но не мог понять, что нужно сделать, чтобы это работало в моем случае.

Любая помощь в этом вопросе будет принята с благодарностью.

1 Ответ

0 голосов
/ 19 октября 2011

Хотя этот вопрос касается iScroll4, решение все равно должно быть одинаковым, так как в экспериментальном scrollview для мобильных устройств iScroll и jquery используется один и тот же обходной путь для прокрутки.

...