Q&A
コードはなるべく全体の流れが分かるものをご提示ください。切り取りすぎては回答者側で状況が正しく再現できません。
現在Monacaを使ってアプリを開発しております。
下記のようなHTMLがあるとき（スクロールするDIVボックスの中にtextareaがあるとき）に、ボタン操作などによってtextareaにフォーカスを合わせたいと考えています。ただtextareaはDIVボックス内の下の方にあるため、DIVボックスをスクロールさせてから、フォーカスを合わせたいと考えております。
このコードを実行するとスクロールされた上でフォーカスも合うのですが、キャレット（カーソル）位置がずれてしまいます（スクロールされる前に位置していたtextareaのキャレット位置のまま）。
おそらく画面スクロールが影響してキャレット位置がずれてると思われますが、focus()をsetTimeoutで遅らせて実行させても変わりません。
画面スクロール後、正しい位置にキャレットを持ってきたいと思うのですが、どのように対処したらよろしいでしょうか。
ブラウザはiPhone Safariです。
よろしくお願いいたします。
HTML
1<div class="box"> <!--高さが100pxでスクロールします--> 2 <div>あああ</div> 3 <div>あああ</div> 4 <div>あああ</div> 5 <div>あああ</div> 6 <div>あああ</div> 7 <div>あああ</div> 8 <div>あああ</div> 9 <div>あああ</div> 10 <textarea></textarea> 11</div>
JavaScript
1// ボタン操作などによって下記を実行 2$('.box').animate({ scrollTop: 100 }, 'normal'); // 画面スクロール 3$('.box').find('textarea').focus(); // フォーカス設定
追記
現象としてはこちらのサイトにあるような状態ですが、入力しようとしたり、画面を手動でスクロールしようとすると、正しい位置にキャレットが戻ります。
あなたの回答
tips
プレビュー
