テキストエリアを選択したときに入力しやすい場所まで画面スクロールするJavascript

テキストエリアを選択したときに入力しやすい場所まで画面スクロールするJavascriptを実装するには以下のコードを実装する。

これでテキストエリアを連続入力するときにわざわざスクロールしなくてよいので楽

<textarea id="text1" rows="4" cols="40">文字列などいろいろ</textarea>
<textarea id="text2" rows="4" cols="40">文字列などいろいろ</textarea>
<textarea id="text3" rows="4" cols="40">文字列などいろいろ</textarea>
<textarea id="text4" rows="4" cols="40">文字列などいろいろ</textarea>
<script>
    $(function(){
        $("textarea").focus(function() {
            var id =  $(this).attr("id");
            $(this).select();
            const position = $(`#${id}`).offset().top-230;
            const speed = 200;
            $("html,body").animate({scrollTop:position},speed);
        });
      });
</script>

上記コードでは、テキストエリアが選択されたら、選択されたIDを取得し、そのID要素をTOPから230px下げた位置までアニメーションで移動させている。

$(this).select();

でテキストの全選択もしている。

コメントを残す

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