LoginSignup
4
4

More than 5 years have passed since last update.

[Angular.js] input要素のng-keyupで日本語変換候補決定のためのEnterキーをキャッチしない

Last updated at Posted at 2015-06-07

JSFiddle

input要素入力中にEnterキー押下でメソッドを呼びたいときは"ng-keyup"を使う。

ただし単純にEnterキーかどうかの判定だけだと日本語入力の変換候補決定のためのEnterキーもキャッチされてしまう。→JSFiddle上側のinput

<input id="myInput" ng-keyup="pushEnter($event)" type="text"/>

$scope.pushEnter = function(e){
    if(e.keyCode === 13){
        //mylogic
    }
}

なので変換終了でフラグを立てて、そのときのEnterだったらワンクッション置くようにしておく。
→JSFiddle下側のinput

    // 変換終了イベントをフラグに保存
    var compositionJustEnd = false;
    var myInput = document.querySelector('#myInput');
    myInput.addEventListener('compositionend', function(){
        compositionJustEnd = true;
    });

    $scope.pushEnter = function(e){
        // 変換候補を決定するためのEnterだったら無視
        if(e.keyCode === 13 && !compositionJustEnd){
            // mylogic
        } else {
       // 次のEnterでmylogicが走る
            compositionJustEnd = false;
        }
    }
4
4
1

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
4
4