jQuery 日本語変換のEnterを拾わない方法

  • このエントリーをはてなブックマークに追加
  • Pocket

keyupイベントなどでEnterが押された際に処理をしたいが、IME変換の確定で押されたEnterもフックされてしまうのを防ぐ方法。

プラグインなんかもあるようだけど、僕のやりたいことが実現できなかったので実装。

やりたいこと

  •  input要素でEnterが押されたらvalueを取得して表示する

とってもシンプルなんだけど日本語がとても厄介だった。

keyupイベントでキーコードがEnter (13) だったら処理をすればいいんだが、日本語変換の確定で押されたEnterも拾ってしまうのでね…

見てもらった方が早いと思うので デモ

環境

  • Mac OS X EI Capitan
  • Google Chrome
  • jQuery 2.1.4

ソースコード

いろいろ悩んだ結果、以下のように実装。

デモ

Electronでの実装について

これは元々Electronでアプリを作っていた時に遭遇した問題で、Chromeでいろいろ試して上記ソースに行き着いたが、Electronに持ってくるとさっぱり動かないことが判明。

ElectronというかChromiumの仕様なんだけど、これまた面倒なことになっていた。

  • IME変換中(日本語入力モード)ではkeypressが発生しない
  • 英数モードではすべてのイベントが発生する
  • IME変換確定後はkeyupだけが発生する

(´・ω・`)

ただ、なんとなく条件式を以下のようにしたら同じ挙動になったのでとりあえず良いこととしたい。

 

  • このエントリーをはてなブックマークに追加
  • Pocket

SNSでもご購読できます。

コメントを残す

*