17

inputモバイル ブラウザー (iOS Safari および Chrome でテスト済み) でテキストにフォーカスを当てると、テキスト キャレットが上にdiv配置された の上に表示されます。

簡単で簡単な例を次に示します: http://jsfiddle.net/XQf8N/

効果のスクリーンショットは次のとおりです。

ここに画像の説明を入力

これを回避する最善の方法は何でしょうか?

私はここで答えを試しました: JQuery Mobile: focused input text does not appear z-index, appear below all other but it's not work.

更新$("input").blur();さらに掘り下げた後、メニューを切り替えるときにも実行しようとしdivましたが、モバイルデバイスでも機能しないようですが、デスクトップのフォーカスは削除されます.

更新 2これに関連している可能性があります: iPad Safari は blur イベントを発生させませんが、イベント リスナーではなく setTimeout でテキスト ボックスをぼかすと、テキスト ボックスは正常にぼやけます。このフィドルを参照してください: http://jsfiddle.net/XQf8N/17/

更新 3非表示のテキスト ボックスに入力を渡そうとしても、 http://jsfiddle.net/XQf8N/23/のいずれかが機能しないようです。

更新 4示唆されているようにカーソルを非表示にすることを検討していないことに気付きました-http ://jsfiddle.net/XQf8N/24/-これは、テキストボックスにカーソルを合わせたときにマウスポインターを非表示にするだけで、キャレットには何もしません

UPDATE 5テキストボックスを無効にする提案。これはフォーカスを失わず、キーボードを閉じませんhttp://jsfiddle.net/XQf8N/27/

更新 6このソリューション: https://stackoverflow.com/a/7761438/1061602はイベント リスナー内では機能しません。フィドルを参照してください: http://jsfiddle.net/XQf8N/29/

更新 7このソリューション: https://stackoverflow.com/a/6473076/1061602も機能せず、テキスト ボックスを無効にした場合と同じ結果になります

UPDATE 8ノックアウトを使用してバインドされた関数内のテキストボックスをぼかす: http://jsfiddle.net/XQf8N/33/

元のイベントリスナーの何が問題なのですか? このトラブルシューティングが同じ問題を抱えている場合に役立つことを願っています。

4

4 に答える 4

0

document.activeElement.blur();メニューを開いた直後にこのコードを実行してみてください。

于 2016-11-01T18:34:17.047 に答える
0

visibility: hidden;私は自分のソリューションに使用できました。

于 2016-12-13T19:29:33.617 に答える