React.js

日本語変換を確定させるEnterと入力確定のEnterを判別する方法

やりたいこと

キーワード検索時にボタンをクリックさせずにEnterキーを押すことで検索を実行したい。
ただし、日本語変換を確定させるEnterには反応したくない

結論

下記のイベントハンドラを使用する

イベントハンドラ 内容
onKeyDown 何かしらのキーが押されたときに発火
onCompositionStart 変換が開始したときに発火
onCompositionEnd 変換が終了したときに発火

サンプルコード

Enterで入力確定

// JS部分
function handleKeyDown(event) {
  if (event.key === 'Enter') {
    // 入力を確定したときの処理(検索実行)
  }
}

// HTML部分
<input onKeyDown={handleKeyEvent}>

日本語変換の確定と、入力の確定を判定する

// JS部分
const [isComposing, setIsComposing] = useState(false);

function handleKeyDown(event) {
  if (event.key === 'Enter' && !isComposing) {
    // 入力を確定したときの処理(検索実行)
  }
}

// HTML部分
<input
  onKeyDown={handleKeyDown}
  onCompositionStart={() => setIsComposing(true)}
  onCompositionEnd={() => setIsComposing(false)}
/>
ABOUT ME
ytakeuchi
都内在住のフロントエンドエンジニア。2016年からフリーランスとして活動中。座右の銘は「昨日よりも楽に」。好きな言葉は「効率化」。こんな性格なのでプライベートではGoogle Apps Scriptばかり触っています。