前端開發小學堂（一）如何限制按下Enter就送出表單與勾選框的可勾選數量

今天的前端開發小學堂，會介紹兩項小方法：

在一般情況下，按下Enter就會直接送出表單，若有額外的需求，不能讓表單直接被送出呢？
在做項目選擇時，我們可一直將勾選框打勾，若要限制可勾選數量呢？

以上兩種問題小情境，想知道怎麼製作嗎，那就繼續往下看吧！

如何使用禁止按下Enter就送出表單

一般瀏覽器預設的情況下、當滑鼠遊標停留在表單上面的時候、如果按下Enter鍵，就會直接送出表單。

不過有時候我們會有一些額外的需求而不是直接送出表單。例如在按下【送出】按鈕的時候、先跳出個詢問是否確認的對話框，按下【確認】才正式送出表單，按下【取消】則關閉對話框。

在上面所說的情況下我們自然不希望直接送出表單。如果要避免按下Enter鍵就送出按鈕，我們可以這樣子做：

$(document).on("keypress", "form", function (e) {
    var code = e.keyCode || e.which;
    if (code == 13) {
        e.preventDefault();
        return false;
    }
});

只要在您的Js添加上面這段、就可以防止按下Enter鍵時直接送出表單。

範例中的 code == 13 是判斷被按下的按鍵是【Enter】。鍵盤上每個按鍵都有相對應的keyCode，如果 Enter = 13, Esc = 27。

需要更詳細的資料可以到這裡參考

https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode

如何限制勾選框的可勾選數量

有時候我們會需要限制勾選框的可勾選數量。在這裡我們要分享如何使用jQuery來達成限制可勾選數量的目的。

首先引入 jQuery

<script src="https://code.jquery.com/jquery.js"></script>

接者準備HTML

<label><input type="checkbox" class="game" />
one</label><br />
<label><input type="checkbox" class="game" />
two</label><br />
<label><input type="checkbox" class="game" />
thr</label>ee<br />
<label><input type="checkbox" class="game" />
fou</label>r<br />
<label><input type="checkbox" class="game" />
five</label>

jQuery

var max_limit = 3;
$(".game:input:checkbox").change(function (){
    if ($(".game:input:checkbox:checked").length > max_limit){
        this.checked = false;
    }
});

codepen 範例：https://codepen.io/ellen-shih/pen/gOwyVJx

想知道更多前端相關的知識嗎？那就不要錯過歐斯瑞的文章分享呦！記得追蹤歐斯瑞FB粉絲團及IG，也可以訂閱電子報，隨時掌握第一手最新資訊喔～有問題也歡迎隨時與我們聯繫下次見囉！

前端開發, 技術應用

前端開發小學堂（一）如何限制按下Enter就送出表單與勾選框的可勾選數量