【完全解決】取消回車自動提交表單

情景一:

form 中沒有需要輸入Enter鍵的控件,如沒有textarea

方法一: 在 form 標簽上添加 'onkeypress'

<form ... onkeypress="return event.keyCode != 13;">

方法二: 通過 JQuery 用代碼統一處理

$(document).on("keypress", "form", function(event) { 
    return event.keyCode != 13;
});

情況二:

form 中有 textarea,需要輸入Enter 鍵,且此Enter鍵不造成Form的自動提交

方法一: 笨辦法 - 適用于控件不多的場景,每一個控件上單獨添加屏蔽Enter鍵的輸入,如:

<input ... onkeypress="return event.keyCode != 13;">
<select ... onkeypress="return event.keyCode != 13;">
...

方法二: 用代碼的方式來批量屏蔽,如下:

$(document).on("keypress", ":input:not(textarea)", function(event) {
    return event.keyCode != 13;
});

方法三: 方法二的改良版,增加了對個別控件需要單獨使用Enter鍵做其他操作的個別需求,可以使用如下方法:

$(document).on("keypress", ":input:not(textarea)", function(event) {
    if (event.keyCode == 13) {
        event.preventDefault();
    }
});

方法四:針對性屏蔽,比如僅開啟 textarea 和 submit 按鈕的Enter, 如下:

$(document).on("keypress", ":input:not(textarea):not([type=submit])", function(event) {
    // ...
});

摘錄自: Stack Overflow 站點 原文鏈接

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。