【完全解决】取消回车自动提交表单
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 站点 原文链接