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

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


当前回答

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

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

如果有人想将此应用于特定的字段,例如输入类型text:

<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>

这对我来说很有效。

其他回答

这对我很有用

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

如果你正在使用Alpine,你可以通过按Enter来阻止表单提交:

<div x-data>
  <form x-on:keydown.prevent.enter="">...</form>
</div>

或者,您可以使用.window修饰符在页面的根窗口对象而不是元素上注册事件侦听器。

<form>
  <div x-data>
    <input x-on:keydown.window.prevent.enter="" type="text">
  </div>
</form>
$(document).on("keydown","form", function(event)
{
   node = event.target.nodeName.toLowerCase();
   type = $(event.target).prop('type').toLowerCase();

   if(node!='textarea' && type!='submit' && (event.keyCode == 13 || event.keyCode == 169))
   {
        event.preventDefault();
        return false;
    }
});

它工作得很完美!

不需要阻止用户按Enter键(这似乎不自然),您可以让表单保持原样,并添加一些额外的客户端验证:当调查未完成时,结果不会发送到服务器,用户会收到一条漂亮的消息,告诉需要完成哪些内容才能完成表单。如果您正在使用jQuery,请尝试验证插件:

http://docs.jquery.com/Plugins/Validation

这将需要比捕捉Enter按钮更多的工作,但肯定会提供更丰富的用户体验。

在我的特定情况下,我必须停止ENTER提交表单,并模拟单击提交按钮。这是因为提交按钮上有一个点击处理程序,因为我们在一个模态窗口中(继承了旧代码)。在任何情况下,这是我的组合解。

    $('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的人特别有用。