44
45

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

日本語確定時のenterキー入力を判別しつつ入力内容により処理する方法のメモ

Last updated at Posted at 2013-11-29

jQueryでinputフィールドに入力されている内容を監視し、enterキーが押されたタイミングで処理を発火する
また、1文字単位で入力内容の変化を検知して処理を発火する

keypressを使用した場合、受け取ったイベントにキーコードが含まれるものの、
inputフィールドのval()で取得できる値は入力実行前の値となるためenterキーが押されたことは検知できるが、1文字単位での処理を行うのは(可能だろうけど)面倒かもしれない。
また、この場合、日本語変換中か否かの判定ができないような気がする。

上記踏まえ以下のようにしたところ意図通り動作した。
(日本語確定状態でEnterを押したときにfunc1、空欄になったときにfunc2、その他入力時func3)

  var keyDownCode = 0;
  $('#message').keydown(function(e) {
    keyDownCode = e.which;  // 押下されたキーのコードをとっておく(日本語変換確定の場合keyupと異なるコード)
  });
  $('#message').keyup(function(e) {
    if ( 13 == e.which && e.which == keyDownCode ) {
      // 日本語入力確定済みかつinputにフォーカスのある状態でエンターキー押下したときの処理
      func1();
      return false;
    }
    $('#message').change();  // 1文字ごとの変化を監視処理したい場合、changeイベントを発生させる
  });
  $('#message').change(function() {
    if('' === $(this).val() && currentId) {
      // inputテキストが空欄になった
      func2();
    } else if('' !== $(this).val()) {
      // inputテキストが空欄ではない(変換途上の文字列含む)
      func3();
    }
  });
44
45
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
44
45

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?