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

React.js2024年10月3日

やりたいこと

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

結論

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

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

サンプルコード

Enterで入力確定

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

ytakeuchi

2016年からフロントエンド領域を中心にフリーランスとして活動中。座右の銘は「昨日よりも楽に」好きな言葉は「効率化」こんな性格なので最近はAIツールばかり触っています。

関連記事

ローディング状態を管理するカスタムフック
React.js2024年10月5日

// JS部分
const [isComposing, setIsComposing] = useState(false);
 
function handleKeyDown(event) {
  if (event.key === 'Enter' && !isComposing) {
    // 入力を確定したときの処理（検索実行）
  }
}
 
// HTML部分
<input
  onKeyDown={handleKeyDown}
  onCompositionStart={() => setIsComposing(true)}
  onCompositionEnd={() => setIsComposing(false)}
/>

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