HTML-форма с использованием iUI на iPad имеет неравномерную прокрутку при вводе текстовых файлов ввода

Я использую фреймворк iUI для сайта, оптимизированного для отображения на iPhone/iPad для мобильных браузеров Safari. У меня возникла проблема при использовании iUI и темы по умолчанию с формами, которые выходят за пределы высоты окна браузера iPad (высота экрана). Это поведение не проявляется в настольной версии Safari при использовании агента пользователя iPad, и его немного сложно описать, но вот...

У меня есть длинная форма, которая содержит много текстовых полей, как это:

  <form accept-charset="UTF-8" action="/customers" class="panel" enctype="multipart/form-data" id="new_customer" method="post" target="_self"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="rp8JH0JucnB9dfQ9TaRr2sTp2rt3Q/fKkzWm5VBB70g=" /></div>
    <script>
        $("form").attr("selected", "true"); 
    </script>
    <input id="fromScheduler" name="fromScheduler" type="hidden" value="0" />
<h2>Client Information</h2>
<fieldset>
    <div class="row">
    <label for="customer_firstName">First Name</label>
    <input autocomplete="off" id="customer_firstName" name="customer[firstName]" onBlur="checkDuplicateClient();" size="30" type="text" />
    </div>
    <div class="row">
    <label for="customer_lastName">Last Name</label>
    <input autocomplete="off" id="customer_lastName" name="customer[lastName]" onBlur="checkDuplicateClient();" size="30" type="text" />
    </div>
    <div class="row"> 
    <label for="customer_email">Email #1</label>
        <input autocomplete="off" id="customer_email" name="customer[email]" size="30" type="email" />
    </div>
    <div class="row"> 
    <label for="customer_secondary_email">Email #2</label>
        <input autocomplete="off" id="customer_secondary_email" name="customer[secondary_email]" size="30" type="email" />
    </div>

(Всего у меня 22 строки текстовых полей с именами/значениями в первой коллекции fieldset, затем еще две коллекции fieldsset разной длины, 0...n строк)

Происходит следующее: при нажатии на поле, которое появляется почти в самом низу экрана iPad без отображения клавиатуры, клавиатура всплывает, как и ожидалось, но окно браузера прокручивается до самого верха страницы. Поскольку клавиатура отображается, это препятствует заполнению поля формы. Это происходит для каждого поля, которое появляется вблизи или за пределами нижней части окна iPad.

Я использую стандартный iUI CSS (iui.css, iui-panel-list.css и стандартный css темы) и включаю iUI javascript вместе с jQuery 1.5.2, jQuery UI и jQuery livequery.

Есть идеи, что может быть причиной этого? Это не просто раздражает, это делает мобильную версию этих форм практически непригодной для использования. Любая помощь будет принята с благодарностью.

5
задан Chris Hart 26 October 2011 в 02:42
поделиться