通过按Enter阻止用户提交表单


772

我在一个网站上进行了一项调查,并且用户按下Enter键(我不知道为什么)并且不按提交按钮就意外提交了调查(表单)似乎存在一些问题。有办法防止这种情况吗?

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


2
不要使用表单标签并执行自定义的ajax请求:)但是,可以肯定,您可以继续使用密钥侦听和预防方法,这就是我要做的
。。– jancha

我只是不使用表单标签,因为我更喜欢以非常规方式通过ajax请求处理表单(即:在焦点移出时提交某些字段,等等)。您还可以使特殊的侦听器捕获Enter键并仅在需要时对其进行处理。
胡安

Answers:


881

您可以使用诸如

$(document).ready(function() {
  $(window).keydown(function(event){
    if(event.keyCode == 13) {
      event.preventDefault();
      return false;
    }
  });
});

在阅读原始帖子的评论时,要使其更加有用,并允许人们在Enter完成所有字段后按下:

function validationFunction() {
  $('input').each(function() {
    ...

  }
  if(good) {
    return true;
  }
  return false;
}

$(document).ready(function() {
  $(window).keydown(function(event){
    if( (event.keyCode == 13) && (validationFunction() == false) ) {
      event.preventDefault();
      return false;
    }
  });
});

7
我目前只是在寻找快速解决方案,而没有时间实施验证项。我感谢每个人的回答,但这是我在此期间要使用的答案。谢谢。
DForck42,2009年

8
此方法是不理想的,因为它阻止用户在专注于“提交”按钮时通过按Enter来提交表单。最好的解决方案是下面的BalusC,只有在仍然专注于表单输入的情况下,enter才被中断。
Anson Kao

3
我见过的情况下(IE浏览器只),您需要绑定keydowndocument,而不是window为这个工作。
MartinHN 2012年

8
您可能需要添加&& !$(document.activeElement).is('textarea')条件,否则textarea内的换行符将被阻止(至少在IE中)。
Flash

1
这对我有用。但这也阻止在文本区域中添加换行符。
塞萨尔·莱昂

612

禁止在任何地方输入密钥

如果您<textarea>的表单中没有,则只需将以下内容添加到您的中<form>

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

或使用jQuery:

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

这将导致将在窗体上检查每次按键key。如果不是Enter,则它将返回true并且一切照常进行。如果为Enter,则它将返回false并且任何内容都将立即停止,因此不会提交该表单。

keydown事件优于keyup作为keyup是来不及块的形式提交。历史上也有keypress,但已弃用,因为KeyboardEvent.keyCode。您应该改用KeyboardEvent.key返回按键名称的方法。如果Enter选中,则将检查13(普通输入)以及108(数字键盘输入)。

需要注意的是$(window)在一些其他的答案,而不是建议的$(document)不工作keydown/ keyup如果你像覆盖那些可怜的用户,以及在IE <= 8,所以这不是一个很好的选择。

仅在文本区域上允许输入键

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

请注意,input[type=text]正如其他一些答案所建议的那样,这些内容并不涵盖那些HTML5非文本输入,因此这不是一个好的选择器。


11
这应该是一个很好的答案,因为它还处理包括textarea在内的形式并更好地解释事件传播
foob​​ar

6
":input:not(textarea):not([type=submit]):not(button)"如果您使用的<button>不是<input type=submit>
Simon_Weaver

这样可以防止Enter键对textarea以外的任何输入起作用。这不是一个好的解决方案
mate.gwozdz

以前应该有一个冒号input吗?
xfactorial

1
@YodaDaCoda:同意并进行了调整。
BalusC

110

W3C HTML5规范的第4.10.22.2节隐式提交说:

一个form元素的默认按钮是第一个提交按钮树形结构顺序,其所属表单form元素。

如果用户代理支持让用户隐式提交表单(例如,在某些平台上,当文本字段聚焦时隐式提交表单,则按下“ enter”键),则对默认按钮已定义激活的表单进行此操作行为必须导致用户代理在该默认按钮运行综合点击激活步骤

注意:因此,如果禁用了默认按钮,则使用这种隐式提交机制时不会提交表单。(禁用时,按钮没有激活行为。)

因此,禁用任何隐式提交表单的符合标准的方法是将禁用的提交按钮放置为表单中的第一个提交按钮:

<form action="...">
  <!-- Prevent implicit submission of the form -->
  <button type="submit" disabled style="display: none" aria-hidden="true"></button>

  <!-- ... -->

  <button type="submit">Submit</button>
</form>

这种方法的一个不错的功能是,它无需JavaScript就可以工作;无论是否启用JavaScript,都需要使用符合标准的Web浏览器以防止隐式表单提交。


5
Errrr ...这是纯金。如果这真的可以跨浏览器运行,那么它应该转到顶部!如此多的人如何回答各种按键,击键等问题,却错过了基于标准的答案?
约翰·里斯

3
一方面,它很简单,可以避免接受的答案所建议的所有陷阱。另一方面,感觉像是对该标准的轻微利用。包括aria- *属性的荣誉。我希望听到更多关于此的反馈。
Solvitieg '18 -10-2

2
也可以使用<input type="submit" disabled style="display: none" aria-hidden="true" />,您可以将页面大小减少几个字符。:-P
gaefan

7
IE 11仍会提交。
CamaroSS

2
Safari是新的IE。
twistedpixel

68

我必须捕获与按键有关的所有三个事件,以防止提交表单:

    var preventSubmit = function(event) {
        if(event.keyCode == 13) {
            console.log("caught ya!");
            event.preventDefault();
            //event.stopPropagation();
            return false;
        }
    }
    $("#search").keypress(preventSubmit);
    $("#search").keydown(preventSubmit);
    $("#search").keyup(preventSubmit);

您可以将以上所有内容组合成一个不错的紧凑版本:

    $('#search').bind('keypress keydown keyup', function(e){
       if(e.keyCode == 13) { e.preventDefault(); }
    });

7
您可以链接最后3个选择器或用一种方法绑定多个事件$("#search").bind('keypress keyup keydown',preventSubmit);
Moak

因为在ASP.NET Web表单中,所有内容都必须嵌套在<form>标记中,所以Enter键提交表单...此解决方案禁用了Enter键,并修复了问题,谢谢@Dave!然后我通过启用了某些字段的回车键id
伊恩·坎贝尔

@Upgradingdave如何编写“ log()”而不是“ console.log()”?
radbyx

1
@radbyx ...不错,应该是console.log,我更新了答案。
Upgradingdave

请注意,使用两次keypress keyup keydown触发if条件中的任何代码。
凯诺克

56

如果使用脚本执行实际的提交,则可以向onsubmit处理程序添加“ return false”行,如下所示:

<form onsubmit="return false;">

从JavaScript调用表单上的commit()不会触发该事件。


在Chrome中对我有效,这也会禁用提交按钮,如果您想触发提交按钮本身的onlick-event,那就很好。Ajax提示:在返回之前添加函数调用,用户仍然可以按Enter键,而无需将表单提交到页面。
丹尼斯·海登

在Chrome,IE-11和Firefox上为我工作,是最简单的解决方案。像某些答案一样,在页面的整个部分禁用回车键似乎太极端了,容易出现错误。
罗伯托

谢谢。它为我工作。
LU

23

采用:

$(document).on('keyup keypress', 'form input[type="text"]', function(e) {
  if(e.keyCode == 13) {
    e.preventDefault();
    return false;
  }
});

该解决方案适用于网站上的所有表单(也适用于Ajax插入的表单),仅防止Enter输入文本中使用s。将其放在文档准备就绪功能中,并终身忘记此问题。


我认为原来的答案e.which很好。无需将其更改为e.keyCode。两者都返回Enter键的值13。参见stackoverflow.com/a/4471635/292060stackoverflow.com/a/18184976/292060
goodeye 2014年

2
此解决方案有两种解决方案:1.)不要在enter上提交表单2.)允许在textareas中输入
PlanetUnknown

21

可以阻止Enter表单看起来像是不自然的,而不是阻止用户按下,而是可以保留表格并添加一些额外的客户端验证:调查未完成时,结果不会发送到服务器,并且用户会收到一条很好的消息,告知需要完成什么才能完成表格。如果您使用的是jQuery,请尝试验证插件:

http://docs.jquery.com/插件/验证

这比Enter按下按钮需要更多的工作,但是可以肯定的是它将提供更丰富的用户体验。


13
听起来不错,但可选字段存在问题,用户可能会误按Enter键,然后将提交表单。我不知道你将如何知道什么时候该调查还没有结束,除非你把各个领域的要求(无默认选择,不允许有空白字段...)
克里斯托夫•鲁西

19

一个不错的简单jQuery小解决方案:

$("form").bind("keypress", function (e) {
    if (e.keyCode == 13) {
        return false;
    }
});

1
+1我一直在寻找jQuery替代方案,而不是使用普通的JS,例如var key = event.keyCode || event.which; if (key == 13) return false;
RaphaelDDL

1
从技术上讲,这仍然是POJ,只是带有一个更简单的jquery包装器。您提供的代码几乎是同一回事。
Eonasdan

19

我目前无法发表评论,因此我将发布一个新答案

接受的答案还可以,但是并没有停止在numpad enter上提交。至少在当前版本的Chrome中。我不得不对此更改键码条件,然后它可以工作。

if(event.keyCode == 13 || event.keyCode == 169) {...}

5
Enter和Return之间的区别-许多销售点操作员仅使用数字键盘。+1
helloserve

8
现在(2015
Cliff Burton

15

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

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

13

完全不同的方法:

  1. <button type="submit">按时将激活表格中的第一个Enter
  2. 即使按钮被隐藏,也是如此 style="display:none;
  3. 该按钮的脚本可以返回 false,从而中止提交过程。
  4. 您仍然可以另外<button type=submit>提交表格。刚回来true即可层叠提交。
  5. 紧迫 Enter聚焦真实提交按钮时会激活真实提交按钮。
  6. Enter向内压<textarea>控件或其他窗体控件将表现正常。
  7. 按下Enter内部<input>窗体控件将触发first <button type=submit>,它返回false,因此什么也没有发生。

从而:

<form action="...">
  <!-- insert this next line immediately after the <form> opening tag -->
  <button type=submit onclick="return false;" style="display:none;"></button>

  <!-- everything else follows as normal -->
  <!-- ... -->
  <button type=submit>Submit</button>
</form>

1
嗯,在Chrome和Firefox中,甚至更短的版本是<button disabled style =“ display:none;”> <button>,它还具有不需要JS才能工作的优点。Safari只是忽略该按钮,因此其他事情将照常发生。
爱立信

1
我真的不喜欢“忽略13个键码”的方式,所以我开始思考一些简单而棘手的方式,这个想法浮现在我的脑海,当我向下滚动此页面时,我看到了这个线程:)。再加上一个用于共同构想和最佳解决方案的方法。
Jalali Shakib,

对我来说是完美的答案。我想要一个模拟CLI的表单,以便用户在每个下一个字段按Enter键,然后在最后提交。
弥敦道

噢,<button onclick="this.disabled=true;this.form.submit();" type="submit"">submit</button>
妙不可言

@ArashMoosapour请不要禁用具有焦点的提交按钮-这样做会失去焦点,并且会影响可访问性。
Erics

9

给表单一个动作'javascript:void(0);' 似乎可以解决问题

<form action="javascript:void(0);">
<input type="text" />
</form>
<script>
$(document).ready(function() {
    $(window).keydown(function(event){
        if(event.keyCode == 13) {
    alert('Hello');
        }
    });
});
</script>

8

不放置提交按钮可以。只需将脚本放到输入(类型=按钮)中,或添加eventListener(如果您希望它在表单中提交数据)。

宁可使用这个

<input type="button">

比使用这个

<input type="submit">


7

我只需要阻止特定的输入提交,因此我使用了一个类选择器,以便在需要的地方都将其作为“全局”功能。

<input id="txtEmail" name="txtEmail" class="idNoEnter" .... />

和这个jQuery代码:

$('.idNoEnter').keydown(function (e) {
  if (e.keyCode == 13) {
    e.preventDefault();
  }
});

或者,如果击键不足:

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

一些注意事项:

在这里修改各种好的答案后,该Enter键似乎适用keydown于所有浏览器。对于替代方法,我更新bind()on()方法。

我是类选择器的忠实拥护者,权衡了所有优缺点和性能讨论。我的命名约定是'idSomething',以指示jQuery将其用作ID,以将其与CSS样式分开。


这适用于表单中的文本框元素。键入并在文本框中按Enter时,默认行为将提交表单。这会拦截Enter键并阻止其提交。
goodeye 2014年

5

您可以使用JavaScript方法检查是否已Enter按下键,如果已按下,则停止提交。

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

只需在Submit方法上调用它即可。


4

只能提交,但不能输入其他重要的回车键功能,例如在<textarea>:中创建新段落:

window.addEventListener('keydown', function(event) {
  //set default value for variable that will hold the status of keypress
  pressedEnter = false;

  //if user pressed enter, set the variable to true
  if (event.keyCode == 13)
    pressedEnter = true;

  //we want forms to disable submit for a tenth of a second only
  setTimeout(function() {
    pressedEnter = false;
  }, 100)

})

//find all forms
var forms = document.getElementsByTagName('form')

//loop through forms
for (i = 0; i < forms.length; i++) {
  //listen to submit event
  forms[i].addEventListener('submit', function(e) {
    //if user just pressed enter, stop the submit event
    if (pressedEnter == true) {
      updateLog('Form prevented from submit.')
      e.preventDefault();
      return false;
    }

    updateLog('Form submitted.')
  })
}

var log = document.getElementById('log')
updateLog = function(msg) {
  log.innerText = msg
}
input,
textarea {
  display: inline-block;
  margin-bottom: 1em;
  border: 1px solid #6f6f6f;
  padding: 5px;
  border-radius: 2px;
  width: 90%;
  font-size: 14px;
}

input[type=submit] {
  background: lightblue;
  color: #fff;
}
<form>
  <p>Sample textarea (try enter key):</p>
  <textarea rows="4">Hit enter, a new line will be added. But the form won't submit</textarea><br/>
  <p>Sample textfield (try enter key):</p>
  <input type="text" placeholder="" />
  <br/>
  <input type="submit" value="Save" />
  <h3 id="log"></h3>
</form>


想知道谁和为什么会否决这个问题:| 我的解决方案有什么问题?
mate.gwozdz

为贡献而投票。接受的答案会破坏大多数表单UI,从而阻止在整个应用程序中注册“输入”。不好。我认为允许在表单元素(尤其是按钮)中处理回车是一个好主意,因此我喜欢您要走的路。我认为这可以实现,而无需超时。例如,仅查看事件处理程序中的element属性。允许“按钮”和“提交”
Solvitieg

@NathanCH-此代码与您所说的完全相反。它只会阻止enter提交表单,不会阻止任何其他功能-例如,您可能有一个文本字段,并想使用enter创建新段落。
mate.gwozdz

1
第一行有错字。代替function(e)它应该是function(event)。否则,它对我有用。谢谢。
吉列尔莫·普兰迪'18

1
这是绝对的救命稻草,因为其他所有因素都使我无法正确处理诸如网格内联编辑之类的enter save事件。唯一的建议是根本不使用“ setTimeout”。我认为这就是人们对此答案的问题。太挑剔了。取而代之的是,对于事件do on("keydown", function(event) { enterPressed = true; }然后在submit事件中,do on("submit", function(e) { if (pressedEnter == true) { pressedEnter = false; e.preventDefault(); return false;}可以确保无论延迟如何 都可以正常工作。
柯蒂斯·斯诺登


2

我有一个类似的问题,我有一个带有“ ajax文本字段”(Yii CGridView)的网格,并且只有一个提交按钮。每次我在文本字段中进行搜索,然后点击输入提交的表单。我必须对按钮做一些事情,因为它是视图之间的唯一通用按钮(MVC模式)。我所要做的就是删除type="submit"并放置onclick="document.forms[0].submit()


2

我认为所有答案都已涵盖其中,但是如果您使用带有一些JavaScript验证代码的按钮,则只需将表单的onkeypress设置为Enter即可按预期方式调用您的提交:

<form method="POST" action="..." onkeypress="if(event.keyCode == 13) mySubmitFunction(this); return false;">

onkeypress JS可能是您需要执行的任何操作。无需进行更大的全球变革。如果您不是一个从头开始编写应用程序的人,而您已经被投入修复其他人的网站而无需拆开并重新测试它,则尤其如此。


我意识到它是汤姆·哈伯德(Tom Hubbard)答案的一个变体,我对其进行了+1,因为这实际上是我今天在搜索其他想法之前所做的事情。
大蒜人

2

这里已经有很多好的答案,我只是想从UX的角度做出一些贡献。窗体中的键盘控件非常重要。

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

禁用Enter表单提交仍应允许以下操作:

  1. 通过Enter关注提交按钮时的表单提交。
  2. 填写所有字段后的表单提交。
  3. 通过与非提交按钮进行交互Enter

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

$('form').on('keypress', function(e) {
  // Register keypress on buttons.
  $attr = $(e.target).attr('type);
  if ($attr === 'button' || $attr === 'submit') {
    return true;
  }

  // Ignore keypress if all fields are not populated.
  if (e.which === 13 && !fieldsArePopulated(this)) {
    return false;
  }
});


1

我在这里看不到的答案:当您在页面上的各个元素之间Enter切换时,在到达提交按钮时按会触发表单上的onsubmit处理程序,但会将事件记录为MouseEvent。这是我涵盖大多数基地的简短解决方案:

这不是与jQuery相关的答案

的HTML

<form onsubmit="return false;" method=post>
  <input type="text" /><br />
  <input type="button" onclick="this.form.submit()" value="submit via mouse or keyboard" />
  <input type="button" onclick="submitMouseOnly(event)" value="submit via mouse only" />
</form>

的JavaScript

window.submitMouseOnly=function(evt){
    let allow=(evt instanceof MouseEvent) && evt.x>0 && evt.y>0 && evt.screenX > 0 && evt.screenY > 0;
    if(allow)(evt.tagName=='FORM'?evt.target:evt.target.form).submit();
}

查找工作示例:https : //jsfiddle.net/nemesarial/6rhogva2/


0

在我的特定情况下,我必须停止ENTER提交表单,还必须模拟单击Submit按钮。这是因为提交按钮上具有单击处理程序,因为我们在模式窗口中(继承的旧代码)。无论如何,这是我针对这种情况的组合解决方案。

    $('input,select').keypress(function(event) {
        // detect ENTER key
        if (event.keyCode == 13) {
            // simulate submit button click
            $("#btn-submit").click();
            // stop form from submitting via ENTER key press
            event.preventDefault ? event.preventDefault() : event.returnValue = false;
        }
    });

该用例对使用IE8的人员特别有用。


0

这对我有用

jQuery.each($("#your_form_id").find('input'), function(){
    $(this).bind('keypress keydown keyup', function(e){
       if(e.keyCode == 13) { e.preventDefault(); }
    });
});

0

我想添加一些CoffeeScript代码(未经现场测试):

$ ->
    $(window).bind 'keypress', (event) ->
        if event.keyCode == 13
            unless {'TEXTAREA', 'SELECT'}[event.originalEvent.srcElement.tagName]
                event.preventDefault()

(我希望您喜欢“ except”子句中的技巧。)


0

使用Javascript(无需检查任何输入字段):

<script>
window.addEventListener('keydown', function(e) {
    if (e.keyIdentifier == 'U+000A' || e.keyIdentifier == 'Enter' || e.keyCode == 13) {
        e.preventDefault();
        return false;
    }
}, true);
</script>

如果有人想将其应用于特定字段,例如输入类型文本:

<script>
window.addEventListener('keydown', function(e) {
    if (e.keyIdentifier == 'U+000A' || e.keyIdentifier == 'Enter' || e.keyCode == 13) {
        if (e.target.nodeName == 'INPUT' && e.target.type == 'text') {
            e.preventDefault();
            return false;
        }
    }
}, true);
</script>

就我而言,这很好。


0

走进你的CSS,并添加到它,然后会自动阻止提交您的公式推的,只要你有提交的输入,如果你不再需要它,你可以将它删除或类型activatedeactivate替代

 input:disabled {
        background: gainsboro;
      }
      input[value]:disabled {
        color: whitesmoke;
      }

0

您也可以javascript:void(0)用来阻止表单提交。

<form action="javascript:void(0)" method="post">
    <label for="">Search</label>
    <input type="text">
    <button type="sybmit">Submit</button>
</form>

<form action="javascript:void(0)" method="post">
    <label for="">Search</label>
    <input type="text">
    <button type="sybmit">Submit</button>
</form>


当您专门method="post"在表单上时不起作用。例如,我希望表单通过按钮提交,但不希望在集中输入时按Enter。
Souleste

在这种情况下,您可以使用上述答案,因为该答案基于输入和单击两个都阻止提交表单。上面的示例具有method="post"形式及其作品,请再次检查。
Nisharg Shah,

-2

在对其他解决方案感到沮丧之后,这对所有浏览器都有效。我也建议您使用name_space外部函数来避免声明全局变量。

$(function() {window.name_space = new name_space();}); //jquery doc ready
function name_space() {
    this.is_ie = (navigator.userAgent.indexOf("MSIE") !== -1);

    this.stifle = function(event) {
        event.cancelBubble;
        event.returnValue = false;
        if(this.is_ie === false) {
            event.preventDefault();
        }
        return false;
    }

    this.on_enter = function(func) {
        function catch_key(e) {
            var enter = 13;
            if(!e) {
                var e = event;
            }
            keynum = GetKeyNum(e);
            if (keynum === enter) {
                if(func !== undefined && func !== null) {
                    func();
                }
                return name_space.stifle(e);
            }
            return true; // submit
        }

        if (window.Event) {
            window.captureEvents(Event.KEYDOWN);
            window.onkeydown = catch_key;
        }
        else {
            document.onkeydown = catch_key;
        }

        if(name_space.is_ie === false) {
            document.onkeypress = catch_key;    
        }
    }
}

样品使用:

$(function() {
    name_space.on_enter(
        function () {alert('hola!');}
    );
});

-2

采用:

// Validate your form using the jQuery onsubmit function... It'll really work...

$(document).ready(function(){
   $(#form).submit(e){
       e.preventDefault();
       if(validation())
          document.form1.submit();
   });
});

function validation()
{
   // Your form checking goes here.
}

<form id='form1' method='POST' action=''>
    // Your form data
</form>
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.