【React.js/JavaScript】テキストエリアの文末にフォーカスする（autofocus on textarea end）

概要

HTML の <textarea /> には autofocus という属性があり、これを指定するだけでフォーカスが効きます。

• textarea - HTML: HyperText Markup Language | MDN

ただし、初期状態でテキストが入力されている場合、文頭にカーソルが置かれてしまいます。

そんな時は、setSelectionRange 関数が使えます。

• HTMLInputElement.setSelectionRange() - Web API | MDN

本来はテキストを選択状態にする関数ですが、第一引数（selectionStart）と第二引数（selectionEnd）の両方に文字数を渡すことで、文末にカーソルを置くことができます。

コード例

HTML と JavaScript の実装例がこちら。

// html
<input id="some-input" value="既存文字列" />
<textarea id="some-textarea">既存文字列</textarea>

// js
const input = document.querySelector('#some-input')
const textarea = document.querySelector('#some-textarea')

input.focus()
input.setSelectionRange(5, 5)


textarea.focus()
textarea.setSelectionRange(5, 5)

React.js での実装例がこちら。

const SomeComponent = () => {
  const inputRef = useRef(null)
  const textareaRef = useRef(null)

  useEffect(() => {
    inputRef.current?.focus()
    inputRef.current?.setSelectionRange(5, 5)

    textareaRef.current?.focus()
    textareaRef.current?.setSelectionRange(5, 5)
  }, [])

  return (
    <>
      <input ref={inputRef} value="既存文字列" />
      <textarea ref={textareaRef}>既存文字列</textarea>
    </>
  )
}

実際のコードでは、文字数は text.length のように動的になるかと思います。