5

我正在将 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。

关于可能导致这种情况的任何想法？这不仅令人讨厌，而且使这些表格的移动版本几乎无法使用。任何帮助表示赞赏。

4

1 回答 1

3

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;
于 2011-10-30T00:20:32.637 回答