1

Worklight 6.0.0.1 Enterprise Edition を使用しており、iOS7 で動作するように既存のアプリを更新しています。このアプリケーションは Dojo 上に構築されており、具体的には dojox/app フレームワークを利用しています。

1 つの問題、つまりキーボードが私に多くの困難を引き起こしています。このアプリケーションでは、一部のビューに入力テキスト フィールドがあります。以前のバージョンの iOS では、ユーザーがテキスト フィールドをクリックすると、ビューが上にスクロールされ、ユーザーが入力しているときにフォーカスされている入力が表示されます。

iOS 7 では、キーボードは画面に表示されるだけです。ビューは上方向にスクロールされず、入力フィールドが画面の下部に向かっている場合、キーボードで覆われています。さらに悪いことに、キーボードがフィールドを覆うとフォーカスが失われ、画面の下部にあるすべてのフィールドを操作できなくなります。私が見つけた 1 つの回避策は、meta タグで高さを設定することです。

<meta content="height=device-height, width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" name="viewport">

これは、デバイスで横向きに変更するまでうまく機能します。ポートレート モードでキーボードを開いたり閉じたりすると、画面が正しいサイズに再調整されず、dojox/mobile/ScrollableView (すべてのコンテンツを含む) が上に押し上げられたままになります。キーボードがあった場所の下に空白のパネルがあります。

私たちのアプリケーションに何か関係があるのではないかと考えて、新しい Worklight アプリケーションでテストを試みました。新しいプロジェクトを作成し、メインの HTML ファイルの本文にテキストを追加し、下部に入力テキスト フィールドを追加しました。結果は上記のシナリオと同様でした。この場合、ビューが上に押し上げられ、コンテンツを含む dojox/mobile/ScrollableView が押し上げられすぎています。スクロール可能なビューとキーボードの間に空白のパネルがあります。

config.xml の設定を構成するための提案を含む、キーボードとスクロールに関連するスレッドをいくつか見てきました: KeyboardShrinksView、HideKeyboardFormAccessoryBar、および DisallowOverscroll。これらのどれも問題を解決していません。

残念ながら、スクリーンショットを投稿して、私が見ているものを正確に示すことはできません (評判ポイントが十分ではありません)。

<body id="content" style="display: none;">
    <div data-dojo-props="selected:true" data-dojo-type="dojox.mobile.ScrollableView" id="view0">
            <!--application UI goes here-->
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            <br />
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            <br />
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            <br />
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            <br />
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            <br />
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            <br />
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            <br />
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            <br />
            <input data-dojo-type="dojox/mobile/TextBox"></input>
        </div>
    <script src="js/initOptions.js"></script>
        <script src="js/KeyboardTest.js"></script>
        <script src="js/messages.js"></script>
</body>

正しい方向への提案やうなずきをいただければ幸いです。

ありがとう、クリス

4

1 に答える 1

1

編集: この回答は、Cordova 3.1 および Dojo 1.9.1+ に適用されます。

iOS 7 の iPhone および iPad で Cordova 3.1 を使用した 2 回目の実験とテストでは、次のようにしてうまくいきました。

入力エレメント (必ずしも Dojo ウィジェットではない) に「クリック」イベントのリスナーを追加する際に、meta タグで height: device-height を定義しないでください。

<input onclick="onInputClick(event);" data-dojo-type="dojox/mobile/TextBox">

また

<input onclick="onInputClick(event);">

関数を次のように定義します。

onInputClick = function(e){
    e.target.focus();
};

説明と注意事項:

  • height:device-height が meta タグに存在しない場合、入力フィールドをタップしたときに「フォーカス」イベントはありません (device-height を追加すると修正されますが、横向きで副作用が生じます)。これとは異なり、キーボードの上部にある前/次の矢印を使用して入力フィールドから別の入力フィールドに移動すると、フォーカス イベントが発生します。
  • フォーカス イベントは Dojo モバイル スクロール可能コンテナーによって使用され、キーボードが表示されたときにフィールドが表示されるようにスクロールを調整します。入力フィールドをテーピングする際にフォーカス イベントがないため、この調整は行われません...
  • Cordova 3.1 のドキュメントには次のように記載されていることに注意してください。 /en/3.1.0/guide_platforms_ios_upgrading.md.html#Upgrading%20iOS ). 以上のことから、Cordova はとにかく height:device-height を使用しないことを推奨しているようです. ただし、 <a href="https://issues .apache.org/jira/browse/CB-4862" rel="nofollow">https://issues.apache.org/jira/browse/CB-4862 は、iOS では height:device-height を設定する必要があることを暗示しているようです。 7... 確かに、iOS 7 で導入された変更は依然として多くの苦痛をもたらしています。
  • Dojo Mobile の場合、この問題はhttps://bugs.dojotoolkit.org/ticket/17505で追跡されています。
于 2013-10-16T16:51:19.083 に答える