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 {
      // それ以外
    }
  },
},

以上です。

参考

• Not Rocket Science » Handling IME events in JavaScript
• https://jsfiddle.net/phanan/vqz87f4b/