jQuery フォームでのEnterキーによる誤作動封じ

フォームでのEnterキーによる誤作動封じ

enterキー封じ

window.onload = function() {
        //formの部分はdom要素、id、クラスなどのセレクタを指定
        $('form').on('keydown', function(ev) {
            if ((ev.witch && ev.witch === 13) || (ev.keyCode && ev.keyCode === 13)) {
                ev.preventDefault();
            };
        });
}

js読み込み時にenterキー効いてしまう問題対策

jsの読み込みが終わるまで、イベントが発火しない様にする

css

.pointer-none {
  //イベントを発火できないようにする
  pointer-events: none;
}

html

//あらかじめフォーム内は何も押せないようにしておく
<form class="pointer-none" >...</form>

js

<script type="application/javascript">
window.onload = function() {
    //formの部分はdom要素、id、クラスなどのセレクタを指定
    $('form').on('keydown', function(ev) {
    //13がenterのkey-code
        if ((ev.witch && ev.witch === 13) || (ev.keyCode && ev.keyCode === 13)) {
            ev.preventDefault();
        };
    });
    //pointer-events: none;が設定してあるクラスを外す
    //jsが読み込まれてから操作できるようにするため、最後に記述
    $('form').removeClass('pointer-none');
}
</script>

以上