5

iPhone/iPad モバイル Safari ブラウザーでの表示用に最適化されたサイトに iUI フレームワークを使用しています。iPad ブラウザー ウィンドウの高さ (画面の高さ) を超えるフォームで iUI と既定のテーマを使用すると問題が発生します。この動作は、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 行の名前/値テキスト フィールドがあり、次に可変長のフィールドセット コレクションがさらに 2 つ、0..n 行あります。)

キーボードが表示されていない状態で iPad 画面のほぼ最下部に表示されるフィールドをクリックすると、キーボードは期待どおりにポップアップしますが、ブラウザ ウィンドウはページの最上部までスクロールします。キーボードが表示されているため、フォーム フィールドへの入力が妨げられます。これは、iPad ウィンドウの下部または下部に表示されるすべてのフィールドで発生します。

私は標準の iUI CSS (iui.css、iui-panel-list.css、およびデフォルトのテーマ css) を使用しており、jQuery 1.5.2、jQuery UI、および jQuery livequery と共に iUI JavaScript を含めています。

これを引き起こしている可能性のあるアイデアはありますか？煩わしいだけでなく、これらのフォームのモバイル バージョンが実質的に使用できなくなります。どんな助けでも大歓迎です。

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 に答える