通过按回车键阻止用户提交表单 [重复]答案

【问题标题】：Prevent user submitting form by hitting enter [duplicate]通过按回车键阻止用户提交表单 [重复]
【发布时间】：2013-10-18 13:31:52
【问题描述】：

如何防止用户按“Enter”键提交联系表？此表单是使用 FormMaster 模块制作的。输入框代码如下：

<div id="dnn_ctr1410_FormMaster_ctl_9d6e1fc4341b453f905425dacbefddf2div">
    <label class="SubHead" id="dnn_ctr1410_FormMaster_lbl_ctl_9d6e1fc4341b453f905425dacbefddf2" for="dnn_ctr1410_FormMaster_ctl_9d6e1fc4341b453f905425dacbefddf2">Message*<br></label>
    <textarea class="wsi_contactform_bottomcell" tabindex="1" id="dnn_ctr1410_FormMaster_ctl_9d6e1fc4341b453f905425dacbefddf2" wrap="off" cols="20" rows="2" name="dnn$ctr1410$FormMaster$ctl_9d6e1fc4341b453f905425dacbefddf2"></textarea>
    <span style="display:none;" class="NormalRed" id="dnn_ctr1410_FormMaster_rfv_313f9f05e5224c4e9bbf2bf6808f43c9"><br>Enter your message.</span>
</div>

我使用了以下脚本，但没有任何结果：

$('.wsi_contactform_bottomcell').on('keypress keydown keyup', function (e) {
    if (e.keyCode == 13) {
        e.preventDefault();
    }
});

输入是指键盘上的“Enter”键！！

【问题讨论】：

在事件回调中放置断点。如果未触发，则将回调绑定到错误的元素。如果它被触发，请查看“e”变量并查看其内容。无论如何，keyCode 应该是正确的。

标签： javascript jquery forms preventdefault enter

【解决方案1】：

使用 e.which

一些浏览器使用keyCode，而其他浏览器使用which。但是对于jQuery，这是标准化的，因此您不必考虑这一点。你可以选择你喜欢的那个。

if (e.which == 13) {
        e.preventDefault();
    }

参考event.which

见demo

【讨论】：

我刚试过这个但也没有正确的结果：/
你是否包含了jquery和你的代码文档
感谢您的示例。我已经包含了准备好的代码+文档，但是它不起作用。
你是在 DOM 中动态注入 textarea 吗？
@marquez 我怎样才能找到这个？这个表单来自一个模块。

【解决方案2】：

为什么不直接忽略按键并删除提交按钮。而不是添加一个 this.submit() 按钮。像这样：

<input type="button" value="Submit contactform" onclick="this.submit();">

这将从表单中删除“输入键”功能。

【讨论】：

这实际上是不可能的，因为这行代码是模块动态生成的。

【解决方案3】：

试试这个，如果元素是动态创建的，你的代码将无法工作，因为元素不存在。

$(document).on("keydown", ".wsi_contactform_bottomcell", function(e) { 
   if (e.keyCode == 13 || e.which == 13) {
    e.preventDefault();
   }
});

【讨论】：

这也不起作用，表单完全忽略了脚本

【解决方案4】：

我过去做过这件事，对我来说效果很好。这将禁用整个页面的 Enter 键的任何效果：

<script language="JavaScript">

function disableEnterKey(e)
{
     var key;    
     if(window.event)
          key = window.event.keyCode;
     else
          key = e.which;

     return (key != 13);
}
</script>

<body onKeyPress="return disableEnterKey(event)">

如果您想禁用特定输入字段的表单提交，请从输入字段的 onKeyPress 处理程序中调用：

<input type="text" name="foo" onKeyPress="return disableEnterKey(event)" >

编辑

专门为您服务：

$('.wsi_contactform_bottomcell').on('keypress', disableEnterKey);

如果脚本从未被调用，那么您可能试图过早地绑定处理程序。如果模块未添加TextArea，则jQuery将在选择器返回零结果时静静地失败。如果是这种情况，那么在尝试绑定事件处理程序之前，您需要制定一个策略来确定模块何时完成对 DOM 的更新。

【讨论】：

没有可用的“输入类型”，看看模块如何构建代码
对不起，这只是一个例子。针对您的具体情况进行了更新。