ユーザーが長いコンテンツを入力できる contenteditable div を含むモバイル Web サイトを開発しています。
jsfiddle のデモ: http://jsfiddle.net/xJzXF/6/show/。
jsfiddle のソース コード: http://jsfiddle.net/xJzXF/6/。
私のアプリのレイアウトは以下のようにシンプルです:
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<div class="container">
<div contenteditable="true" class="editor">this is contenteditable div</div>
</div>
android/chrome でデモにアクセスすると、うまく動作します。
ただし、iOS/サファリを使用している場合、ユーザーが div に入力すると、キーボードはユーザーが入力している内容をカバーします。iOS/サファリは、キャレットを可視領域に保持していないようです。ユーザーは入力時にカーソルまでスクロールする必要がありますが、これは受け入れられません。
これを修正する方法を知っている人はいますか？ありがとう。