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

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


当前回答

禁止在任何地方输入键

如果你的表单中没有<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非文本输入,所以这不是一个好的选择器。

其他回答

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

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

只需在submit方法上调用它。

只有块提交,而不是其他,重要的功能输入键,如创建一个新的段落在<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>

我在这里没有看到答案:当您通过页面上的元素时,当您到达提交按钮时按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/

如果使用Vue,使用以下代码来阻止用户通过按Enter提交表单:

<form @submit.prevent>...</form>

为了阻止表单被提交,我必须捕获所有与按下键相关的三个事件:

    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(); }
    });