javascript - 在 iPad 上使用 iUI 的 HTML 表单在输入文本输入文件时滚动不稳定

Question

我正在为一个网站使用 iUI 框架，该网站针对在 iPhone/iPad 移动 Safari 浏览器上的显示进行了优化。我在使用 iUI 和默认主题以及超出 iPad 浏览器窗口高度(屏幕高度)的表单时遇到问题。使用 iPad 用户代理时，该行为不会出现在桌面版 Safari 上，并且有点难以描述，但这里...

我有一个很长的表格，其中包含很多这样的文本字段:

  <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)，并且包括 iUI javascript 以及 jQuery 1.5.2、jQuery UI 和 jQuery livequery。

关于可能导致此问题的任何想法？这不仅令人厌烦，还使这些表格的移动版本几乎无法使用。感谢您的帮助。

Answer 1

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;