エンターキーにイベントを追加しよう!

エンターキーにイベントを追加しよう!

エンターキーにイベントを追加するには、.on()でkeydownイベントを追加します。

エンターキーの押下にイベントを追加するには?

$(document).on('keydown', function(event) {
    if(event.which === 13) {
        alert('エンターキーが押されました');
    }
});

.on()の第1引数にkeydown、第2引数にコールバック関数を渡し、押下されたキーがエンターキーだった場合、alert()でアラートを表示しています。

コールバック関数の引数にはイベントオブジェクトが渡されます。

if(event.which === 13) {
    alert('エンターキーが押されました');
}

イベントオブジェクトのwhichプロパティには、押下されたキーのキーコードが格納されています。

キーコードとは、押下されたキーに対応する数値のことです。

whichプロパティがエンターキーのキーコードである13と一致する場合、エンターキーが押下されたことになります。

サンプルではアラートを表示していますが、if文の括弧内を変更すれば、任意のコードを実行できます。

イベントオブジェクトについては、以下の記事の「イベントハンドラの引数は?」を参照してください。



$('textarea').on('keydown', function(event) {
    if(event.which === 13) {
        alert('エンターキーが押されました');
    }
});

セレクタを指定することで、特定の要素にイベントを追加することもできます。

エンターキーを無効にするには?

$(document).on('keydown', function(event) {
    if(event.which === 13) {
        return false;
    }
});

エンターキーを無効にするには、エンターキーの押下にイベントを追加するコールバック関数でfalseを返します。

.on()のコールバック関数でfalseを返した場合、イベントがキャンセルされます。

ブラウザのデフォルト動作もキャンセルされるため、結果として、エンターキーが無効になります。

エンターキーでタブ移動するには?

let input = $('input, textarea, select');

input.on('keydown', function(event) {
    if(event.which === 13) {
        let index = input.index(this);
        
        let next = input.eq(index + 1);
        
        if(next.length > 0) {
            next.focus();
        
            return false;
        }
    }
});

input, textarea, select要素でエンターキーが押下された場合、次の要素にフォーカスするkeydownイベントを追加しています。

let input = $('input, textarea, select');

タブ移動の対象とする要素を変数にキャッシュします。

セレクタを変更すれば、対象の要素を変更できます。

let index = input.index(this);

.index()にthisを渡し、現在の要素のインデックスを取得しています。

let next = input.eq(index + 1);

.eq()に現在のインデックスに1を足したもの、つまり次の要素のインデックスを渡し、変数に代入します。

サンプルのnextには、次の要素のjQueryオブジェクトが代入されます。

if(next.length > 0) {
    next.focus();

    return false;
}

次の要素のlengthオブジェクトが0より大きい場合、次の要素にフォーカスを移動します。

lengthオブジェクトが0の場合、次の要素が存在しないので、改行、フォーム送信等、ブラウザのデフォルト動作が実行されます。

最後の要素でフォーム送信するには?

if(next.length > 0) {
    next.focus();
} else {
    input.closest('form').submit();
}

return false;

最後の要素でフォーム送信するには、else文にコードを記述します。

サンプルでは、.closest()で要素が配置されているform要素を選択し、.submit()でフォーム送信を実行しています。

シフトキーとエンターキーで改行するには?

let input = $('input, textarea, select');

let is_shift_pressed = false;

input.on('keydown', function (event) {
    if(event.which === 16) {
        is_shift_pressed = true;
    }
});

input.on('keyup', function (event) {
    if(event.which === 16) {
        is_shift_pressed = false;
    }
});

input.on('keydown', function (event) {
    if (!is_shift_pressed && event.which === 13) {
        is_shift_pressed = false;

        let index = input.index(this);

        let next = input.eq(index + 1);

        if (next.length > 0) {
            next.focus();

            return false;
        }
    }
});

シフトキーとエンターキーで改行するには、シフトキーが押されているときはタブ移動しないようにします。

let is_shift_pressed = false;

シフトキー押下のフラグとなるis_shift_pressed変数を宣言します。

イベントの外で宣言することにより、全てのイベントで変数が使用できます。

input.on('keydown', function (event) {
    if(event.which === 16) {
        is_shift_pressed = true;
    }
});

whichプロパティがシフトキーのキーコードである16のとき、is_shift_pressedをtrueにするkeydownイベントを追加します。

シフトキーが押されたとき、is_shift_pressedがtrueになります。

input.on('keyup', function (event) {
    if(event.which === 16) {
        is_shift_pressed = false;
    }
});

keydownイベントとは逆に、is_shift_pressedをfalseにするkeyupイベントを追加します。

ユーザーがシフトキーを離したとき、is_shift_pressedをfalseにします。

keydownイベントと合わせて、シフトキーが押されているときだけ、is_shift_pressedがtrueになります。

if (!is_shift_pressed && event.which === 13) {
    ...
}

条件に!is_shift_pressedを追加し、is_shift_pressedがfalse、つまりシフトキーが押されていないときにだけ、if文の処理を実行します。

エンターキーの押下でボタンをクリックするには?

$(document).on('keydown', function (event) {
    if (event.which === 13) {
        $('button').trigger('click');

        return false;
    }
});

エンターキーの押下でボタンをクリックするには、.trigger()の第1引数に’click’を渡し、button要素のクリックイベントを発生させます。

ブラウザのデフォルト動作を無効にするため、falseを返すことに注意しましょう。

まとめ

  • エンターキーの押下にイベントを追加するには、イベントオブジェクトを使用します。
  • エンターキーを無効にするには、イベントのコールバック関数でfalseを返します。
  • エンターキーでタブ移動するには、要素のインデックスと.focus()を使用します。
  • エンターキーの押下でボタンをクリックするには、.trigger()を使用します。

実践カテゴリの最新記事