JavaScriptでtextareaにフォーカスした際にカーソルが先頭に来てしまう場合の対処
JavaScriptを使って「要素をクリックしたらテキストエリアに文字列をセットして、そのテキストエリアにフォーカスさせる」という処理を書いたのですが、なぜか Safari と Chrome で「カーソルがテキストエリアの先頭に来てしまう」という現象が発生してしまいました。
↑ こんな風に。
理想は「@meity_jp 」の後ろにカーソルがセットされてほしいのですが、なぜか先頭に来てしまいます。これでは入力時にわざわざ手動でカーソルを移動させないといけなくて不便です。
原因と解決法
しばらく原因がわからなかったのですが、実はすごく単純なことでした。
解決法は、「フォーカスをしてから文字列をセットする」です。jQueryで表現すると以下のように。
$('textarea').focus().val('some text');
これでカーソルは文字列の後ろにきます。これをもし、
$('textarea').val('some text').focus();
としてしまうと、WebKit系のブラウザでカーソルがテキストエリアの先頭にきてしまいます。
で、ここまでは元のテキストエリアが未入力状態の場合。
textareaが入力済みの場合は？
もしテキストエリアに文字列が入力済みで、JavaScriptでフォーカスだけするという場合でも、WebKit系ではカーソルが先頭にセットされてしまいます。
この場合は以下のようにすると、文字列の後ろにカーソルをセットできます。
var v = $('textarea').val(); // 入力済みの文字列を格納
$('textarea').val(''); // 一旦テキストエリアを空に
$('textarea').focus().val(v); // フォーカスさせてから元の文字列をセット
んー、、もっといい方法があるかもしれませんが・・・。
コメントを残す
著者について
const $textarea = $(‘#textarea’);
const textarea = $textarea.get(0);
const caretStart = textarea.selectionStart; //現在のキャレット位置
const text = ‘some text’;
$textarea.val(text).focus();
//元のキャレット位置にセットし直したいなら
textarea.setSelectionRange(caretStart, caretStart);
//末尾にセットし直したいなら
const length = text.length
textarea.setSelectionRange(length, length);
とか？
ってかこれドットインストールの人のブログだったんだ
> クウネル・サンダース様
古い記事ですがコメントありがとうございます。
8年前はまだまだ未熟でしたね…笑