【完全解决】取消回车自动提交表单

2018-07-20  本文已影响0人  痴者无心

情景一:

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 站点 原文链接

上一篇下一篇

猜你喜欢

热点阅读