reactでinputのフォーカスを固定する方法

inputタグにフォーカスを固定する

あるinput要素のフォーカスを外れないようにしたい場合、フォーカスが外れたタイミングで再度フォーカスを当てるという方法で実現できます。

たとえばReactでは下記のような感じです。

componentDidMount() {
  //フォーカス固定したいinput要素をstateに保持
  this.state.input = ReactDOM.findDOMNode(this.refs.input)
  this.state.input.focus()
}

render() {
  return (
    <div>
      <input
        type={'text'}
        onBlur={() => {
          //フォーカスが外れる際に再度フォーカスを当てる
          this.state.input.focus()
        }}
        ref={'input'}
      />
    </div>
  )
}

onBlurイベントは、フォーム部品からフォーカスが外れた際に呼ばれるイベントです。

ここではフォーカスが外れたタイミングで再度フォーカスを当てる処理をすることで、結果的にフォーカスが固定されたような動作にしています。

componentDidMount()でやっているinput要素をstateに保存する処理は必須ではありません。

onBlur={() => {
  ReactDOM.findDOMNode(this.refs.input).focus()
}}

のように直接呼び出してしまってもいいと思います。

複数の場所で呼び出す場合にはstateから呼び出せると便利です。