分享你我的心得.
共乘一片美好网络.

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

情景一:

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) {
    // ...
});

赞(0)
未经允许不得转载:小叶白龙博客 » 【完全解决】取消回车自动提交表单
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址