JavaScript で日本語の変換確定とその他のリターンを識別する方法
2019/09/14JavaScript
HTML のテキストフィールドやテキストエリアで、日本語の変換を確定させるためのリターンキー（エンターキー）入力とその他のリターンキー入力とを JavaScript で識別する方法についてです。
早速結論ですが、イベント compositionstart と compositionend を使えば OK です。
イベント compositionstart は変換処理がスタートしたときに発火します。
compositionend は変換処理が終了すなわち変換が確定したときに発火します。
なので、変換中であるかどうかを表すフラグを持っておいて、フラグが立っているときにリターンキーが入力されたら変換確定、立っていないときに入力されたらそれ以外、という風に見分けることが可能です。
Vue.js での処理イメージ:
<input type="text"
@keydown.enter="submit"
@compositionstart="composing=true"
@compositionend="composing=false"
>
methods: {
submit(event) {
if (this.composing) {
// 変換確定時
} else {
// それ以外
}
},
},
尚、ブラウザが Chrome の場合は keydown のイベントオブジェクト自体に isComposing というフラグプロパティが付いておりそれで判定することができます。
Vue.js での処理イメージ:
<input type="text"
@keydown.enter="submit"
/>
methods: {
submit(event) {
if (event.isComposing) {
// 変換確定時
} else {
// それ以外
}
},
},
以上です。
追記 2020/05/10
React を使う場合は onCompositionStart と onCompositionEnd という属性で変換処理の開始と終了を判定できるようです。
import { useState } from "react"
let [composing, setComposing] = useState(false)
<input type="text"
onCompositionStart={(e) => {
setComposing(false)
}}
onCompositionEnd={(e) => {
setComposing(true)
}}
/>
ただし関連するアクティブなバグがあるようなので実際に利用する際は注意が必要かもしれません。