10

画面の下半分に 2 つの入力フィールドがある webapp に取り組んでいます。親ビューは画面に対して絶対に配置されます。通常、入力フィールドをクリックすると、フォーカスによって入力がキーボードの上に強制的に表示されると想定されます。ただし、キーボードが入力フィールドを覆っています。

入力を開始しても、フィールドには何も入力されません。フィールドに入力するには、次の矢印を押してから前の矢印 (> でフィールド 2 に移動し、< でフィールド 1 に戻る) を押して入力を表示する必要があります。

ビューを調整して、オーバーフロースクロール、相対位置、およびタップ時にプログラムでフォーカスを設定しようとしました。これらのソリューションはどれも機能していません。残念ながら、私は UITextViews と正反対の問題を抱えている人 (つまり、自動的にスクロールしたくない) に関連する回答しか見つけることができません。

4

4 に答える 4

4

興味のある人のための簡単な解決策：

onfocus以下の例のように、常に表示したい入力にイベントを登録します。キーボードがいつ完全にレンダリングされるかわからないため、コードは 300 ミリ秒ごとに 5 回 (1.5 秒間) 実行されます。自分の好みに合わせて調整できます。

このソリューションの唯一の注意点はscollIntoView、一部の古いブラウザーでは動作しない可能性があることに依存していることです ( http://caniuse.com/#search=scrollIntoViewを参照)。もちろん、これを同等のアルゴリズムに置き換えて、同じ結果を得ることができます。とにかく、この簡単な解決策はあなたにアイデアを与えるはずです。

var scrolling = function(e, c) {
  e.scrollIntoView();
  if (c < 5) setTimeout(scrolling, 300, e, c + 1);
};
var ensureVisible = function(e) {
  setTimeout(scrolling, 300, e, 0);
};
<p>Some text here</p>
<input type="text" value="focus me" onfocus="ensureVisible(this)" />
<p>Some text here</p>
<input type="text" value="select me" onfocus="ensureVisible(this)" />

于 2016-06-05T06:35:09.383 に答える
1

簡単なコード例がないとわかりにくいですが、最初のフィールドにクリック ハンドラーを登録してから、その中の 2 番目のフィールドにフォーカスし、次に最初のフィールドに再度フォーカスすると、jQuery では次のようになります。

$('#first_field').on('click', function(){
  $('#second_field').focus();
  $('#first_field').focus();
});

これはうまくいかない可能性がありますが、試してみる価値はあります。そうしないと、CSS と配置をいじり始める必要があります。残念ながら、入力フィールドとキーボードを表示するためにウィンドウを再配置およびズームする場合、iOS の WebKit にバグがある場合があります。

于 2013-09-20T17:45:10.697 に答える