HTML-форма, использующая iUI на iPad, имеет ошибочную прокрутку при вводе текстовых файлов ввода - PullRequest
Новая
       28

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

5 голосов
/ 26 октября 2011

Я использую инфраструктуру iUI для сайта, оптимизированного для отображения в мобильных браузерах Safari для iPhone / iPad. У меня проблема при использовании 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 строки текстовых полей имени / значения в первой коллекции наборов полей, затем еще две коллекции наборов полей различной длины, 0..n строк.)

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

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

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

1 Ответ

3 голосов
/ 30 октября 2011

Похоже, что iUI вызывает функцию setOrientation (), которая регулирует стили страницы в зависимости от ориентации устройства, а также (всегда) прокручивает вверх.Я не верю, что прокрутка вверх страницы всегда уместна, поэтому я предложил следующий патч для группы iUI Google в качестве предложения.Я также публикую это здесь на тот случай, если это пригодится кому-либо еще, и для общего отзыва относительно обоснованности моего подхода. 

--- iui.js
+++ iui.js
@@ -677,12 +677,12 @@ function orientChangeHandler()
    switch(orientation)
    {
    case 0:
-       setOrientation(portraitVal);
+       setOrientationAndScroll(portraitVal);
        break;  

    case 90:
    case -90: 
-       setOrientation(landscapeVal);
+       setOrientationAndScroll(landscapeVal);
        break;
    }
 }
@@ -727,6 +727,11 @@ function setOrientation(orient)
        iui.removeClass(document.body, portraitVal);
        iui.removeClass(document.body, landscapeVal);
    }
+}
+
+function setOrientationAndScroll(orient)
+{
+   setOrientation(orient);
    setTimeout(scrollTo, 100, 0, 1);
 }

@@ -844,7 +849,6 @@ function slide1(fromPage, toPage, backwards, axis, cb)
        (backwards ? fromPage : toPage).style.top = "100%";
    else
        toPage.style.left = "100%";
-
    scrollTo(0, 1);
    toPage.setAttribute("selected", "true");
    var percent = 100;
...