我在一个网站上有一个调查,用户按下回车键(我不知道为什么),不小心没有点击提交按钮就提交了调查(表单),这似乎有些问题。有办法防止这种情况吗?

我在调查中使用HTML, PHP 5.2.9和jQuery。


当前回答

这是我达到目标的解决方案, 它干净有效。

$('form').submit(function () {
  if ($(document.activeElement).attr('type') == 'submit')
     return true;
  else return false;
});

其他回答

禁止在任何地方输入键

如果你的表单中没有<textarea>,那么只需将以下内容添加到你的<form>:

<form ... onkeydown="return event.key != 'Enter';">

或者使用jQuery:

$(document).on("keydown", "form", function(event) { 
    return event.key != "Enter";
});

这将导致表单内的每一次按键都将在该键上进行检查。如果它不是Enter,那么它将返回true,一切照常进行。如果它是Enter,那么它将返回false,任何事情都将立即停止,因此表单将不会提交。

keydown事件优先于keyup事件,因为keyup事件太晚而无法阻止表单提交。历史上也有按键,但这已弃用,KeyboardEvent.keyCode也是如此。你应该使用KeyboardEvent。键,返回所按键的名称。当选中Enter时,这将检查13(正常输入)和108 (numpad输入)。

请注意,在其他一些答案中建议的$(window)而不是$(document)在IE<=8中的keydown/keyup中不起作用,所以如果你想覆盖那些贫穷的用户,这不是一个好的选择。

只允许在文本区域输入键

如果你在你的表单中有一个<textarea>(当然应该接受Enter键),然后添加keydown处理程序到每个不是<textarea>的单独输入元素。

<input ... onkeydown="return event.key != 'Enter';">
<select ... onkeydown="return event.key != 'Enter';">
...

为了减少样板文件,最好使用jQuery:

$(document).on("keydown", ":input:not(textarea)", function(event) {
    return event.key != "Enter";
});

如果在这些输入元素上附加了其他事件处理程序函数,出于某种原因也想在enter键上调用这些函数,那么只防止事件的默认行为,而不是返回false,这样它就可以正确地传播到其他处理程序。

$(document).on("keydown", ":input:not(textarea)", function(event) {
    if (event.key == "Enter") {
        event.preventDefault();
    }
});

允许输入键在文本区域和提交按钮

如果你想允许提交按钮上的输入键<input|button type="submit">,那么你总是可以像下面那样细化选择器。

$(document).on("keydown", ":input:not(textarea):not(:submit)", function(event) {
    // ...
});

请注意,在其他一些答案中建议的输入[type=text]不包括那些HTML5非文本输入,所以这不是一个好的选择器。

这将禁用页面上所有表单的输入键,并且不阻止在文本区域输入。

    // disable form submit with enter

    $('form input:not([type="submit"])').keydown((e) => {
        if (e.keyCode === 13) {
            e.preventDefault();
            return false;
        }
        return true;
    });

您可以创建一个JavaScript方法来检查是否按下了Enter键,如果按下了,就停止提交。

<script type="text/javascript">
  function noenter() {
  return !(window.event && window.event.keyCode == 13); }
</script>

只需在submit方法上调用它。

这里已经有很多好的答案,我只是想从用户体验的角度贡献一些东西。键盘控件在表单中非常重要。

问题是如何在按回车键时禁用提交。而不是如何在整个应用程序中忽略Enter。因此,考虑将处理程序附加到表单元素,而不是窗口。

禁用Enter表单提交仍然允许以下:

当提交按钮被聚焦时,通过输入提交表单。 填充所有字段时提交表单。 通过Enter与非提交按钮交互。

这只是一个样板,但它符合所有三个条件。

$(“形式”)。On ('keypress',函数(e) { //注册按键。 $attr = $(e.target).attr('type'); $node = e.target.nodeName.toLowerCase(); if ($ attr = = =“按钮”| | $ attr = = = '提交' | | $ node = = =“文本区域”){ 返回true; } //如果没有填充所有字段,则忽略按键。 if (e.which === 13 && ! fieldsarepopulate (this)) { 返回错误; } });

没有提交按钮也行。只需在输入(type=button)中放入一个脚本,如果希望它提交表单中的数据,则添加eventListener。

而是使用这个

<input type="button" onclick="event.preventDefault();this.closest('form').submit();">

而不是用这个

<input type="submit">

注意:这里需要onclick在点击时实际提交表单。默认情况下,type="button"不足以提交。