日本語変換を確定させるEnterと入力確定のEnterを判別する方法
React.js
やりたいこと
キーワード検索時にボタンをクリックさせずに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)}
/>