F.Ko-Jiの「一秒後は未来」

JavaScriptでtextareaにフォーカスした際にカーソルが先頭に来てしまう場合の対処

JavaScriptを使って「要素をクリックしたらテキストエリアに文字列をセットして、そのテキストエリアにフォーカスさせる」という処理を書いたのですが、なぜか Safari と Chrome で「カーソルがテキストエリアの先頭に来てしまう」という現象が発生してしまいました。

javascript-focus.jpg

↑ こんな風に。

理想は「@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);    // フォーカスさせてから元の文字列をセット

んー、、もっといい方法があるかもしれませんが・・・。

  1. 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);

    とか?

    ってかこれドットインストールの人のブログだったんだ

    • F.Ko-Ji より:

      > クウネル・サンダース様

      古い記事ですがコメントありがとうございます。
      8年前はまだまだ未熟でしたね…笑

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

著者について

fkoji

F.Ko-Ji

Webエンジニアやってます。最近は ドットインストール の開発がお仕事です。その傍ら、個人で Meity電車遅延なう梅酒.in#グラドル自画撮り部 の部室といったネットサービスを開発・運営してます。梅酒と草野球とリアル脱出ゲームが好きです。

» 詳しいプロフィールや運営サービスの一覧など