エンターキーを押した時の挙動の制御

この記事を読むのにかかる時間 1未満 分

jsで実装します。

コード事例

var DesignNoBtn = function(o){. //①DesignNoBtnの関数コンストラクタを定義
    this.$inputSearchBtn.on('click', $.proxy(this, '_click'));　//・・・②click時のメソッド実行
    this.$inputTxt.on('keypress', $.proxy(this, '_keypress'));　//・・・③keypress時のメソッド実行
};

DesignNoBtn.prototype = {　//④prototype部
    _click : function(){　//⑤_clickメソッド
       ・・・

    ,_keypress : function(e){　//⑥_keypressメソッド
        if(e.which === 13 || e.keyCode === 13){ //⑦押されたキーが Enterキー（13）かどうかを判定
            e.preventDefault();　//⑧Enterキー本来の動作（フォーム送信など）を止める
            this._click();　//⑨Enterキーでもクリックと同じ処理を実行
            return false;　//⑩イベントの伝播・デフォルト動作を止める
        }
    }
};

補足

②③で$.proxy(this, ‘_click’)と記述している理由

通常通りthis._clickとすると、thisの対象がずれてしまう。
意味としては以下のようになる。

function(){
    return DesignNoBtnInstance._click.apply(DesignNoBtnInstance, arguments);
}
// 関数.apply(thisとして使いたいオブジェクト, 引数配列)
// argumentsはこの関数に渡されてきた引数を、何も考えずそのまま _click に渡す時に使う。どんな関数が来るか分からないため

なお、arrow関数を使うと以下のようになる。
こっちの方が馴染みがあって良い。

this.$inputSearchBtn.on('click', () => {
    this._click();
});

⑦Enterキーが13となる理由

13 は ASCIIコード に由来。
spaceキーだと32になる。

今は以下の書き方の方がわかりやすい。

if (e.key === 'Enter') {