Question

我刚写了这个漂亮的小函数，它可以在表单上运行...

$("#form").keypress(function(e) {
    if (e.which == 13) {
        var tagName = e.target.tagName.toLowerCase(); 
        if (tagName !== "textarea") {
            return false;
        }
    }
});

在我的逻辑中，我想在输入textarea期间接受回车。此外，将输入字段的输入键行为替换为tab到下一个输入字段的行为（就像按下Tab键一样）将是一个额外的好处。有没有人知道如何使用事件传播模型正确触发相应元素上的回车键，但阻止表单在其印刷机上提交？

Answer 1

您可以模仿Tab键，而不是像这样输入输入：

//Press Enter in INPUT moves cursor to next INPUT
$('#form').find('.input').keypress(function(e){
    if ( e.which == 13 ) // Enter key = keycode 13
    {
        $(this).next().focus();  //Use whatever selector necessary to focus the 'next' input
        return false;
    }
});

当按下Enter键时，您显然需要确定哪些选择器需要关注 next 输入。

Answer 2

请注意，按下回车键时，始终会提交单个输入表单。防止这种情况发生的唯一方法是：

<form action="/search.php" method="get">
<input type="text" name="keyword" />
<input type="text" style="display: none;" />
</form>

Answer 3

这是我的功能的修改版本。它执行以下操作：

阻止回车键正常工作在其他形式的任何元素上比textarea，按钮，提交。
现在输入键就像一个标签。
preventDefault（），在元素上调用stopPropagation（）很好，但是在窗体上调用似乎会阻止事件进入元素。

所以我的解决方法是检查元素类型，如果类型不是textarea（输入允许），或者按钮/提交（输入=单击），那么我们只需选择下一个选项。

在元素上调用.next（）是没有用的，因为其他元素可能不是简单的兄弟，但是因为DOM在选择时几乎保证顺序所以一切都很好。

function preventEnterSubmit(e) {
    if (e.which == 13) {
        var $targ = $(e.target);

        if (!$targ.is("textarea") && !$targ.is(":button,:submit")) {
            var focusNext = false;
            $(this).find(":input:visible:not([disabled],[readonly]), a").each(function(){
                if (this === e.target) {
                    focusNext = true;
                }
                else if (focusNext){
                    $(this).focus();
                    return false;
                }
            });

            return false;
        }
    }
}

Answer 4

从可用性的角度来看，更改输入行为以模仿选项卡是一个非常糟糕的主意。用户习惯使用回车键提交表单。这就是互联网的运作方式。你不应该打破这个。

Answer 5

将Enter键作为默认按钮描述如何设置按Enter键的默认行为。但是，有时，您需要在Enter Key按下时禁用表单提交。如果你想完全阻止它，你需要在你的页面标签上使用OnKeyPress处理程序。

<body OnKeyPress="return disableKeyPress(event)">

javascript代码应为：

<script language="JavaScript">

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

     return (key != 13);
}

</script>

如果要在输入字段中按Enter键时禁用表单提交，则必须在输入字段的OnKeyPress处理程序上使用上述函数，如下所示：

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

来源：http://www.bloggingdeveloper.com/post/Disable-Form-Submit-on-Enter-Key-Press.aspx

Answer 6

设置表单和输入的触发器，但是当触发输入事件时，通过调用stopPropagation方法停止传播到表单。

顺便说一句，恕我直言，将默认行为更改为普通用户习惯的任何东西并不是一件好事 - 这就是让他们在使用你的系统时生气的原因。但如果你坚持，那么stopPropagation方法就是你的选择。

Answer 7

在我的情况下，我只想在一个动态创建的字段中阻止它，并激活其他一些按钮，所以它有点不同。

$(document).on( 'keypress', '.input_class', function (e) {
    if (e.charCode==13) {
        $(this).parent('.container').children('.button_class').trigger('click');
        return false;
    }
});

在这种情况下，它将在该类的所有输入上捕获回车键，并触发它们旁边的按钮，并且还阻止主要表单被提交。

请注意，输入和按钮必须位于同一个容器中。

Answer 8

之前的解决方案对我不起作用，但我确实找到了解决方案。

等待任何按键匹配，测试匹配13，如果是，则返回false。

＆lt; HEAD＆gt;

中的

function stopRKey(evt) {
  var evt = (evt) ? evt : ((event) ? event : null);
  var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
  if ((evt.which == 13) && (node.type == "text")) {
    return false;
  }
}

document.onkeypress = stopRKey;

Answer 9

我更喜欢@Dmitriy Likhten的解决方案，但是：它只在我改变代码时才起作用：

[...] else 
            { 
             if (focusNext){
                $(this).focus();
                return false; } //  
            }

否则脚本无效。使用Firefox 48.0.2

Answer 10

我稍微修改了Dmitriy Likhten的answer，效果很好。包括如何将函数引用到事件。请注意，您不包括()，否则它将执行。我们只是传递参考。

$(document).ready(function () {
    $("#item-form").keypress(preventEnterSubmit);
});

function preventEnterSubmit(e) {
    if (e.which == 13) {
        var $targ = $(e.target);

        if (!$targ.is("textarea") && !$targ.is(":button,:submit")) {
            var focusNext = false;
            $(this).find(":input:visible:not([disabled],[readonly]), a").each(function () {
                if (this === e.target) {
                    focusNext = true;
                } else {
                    if (focusNext) {
                        $(this).focus();
                        return false;
                    }
                }
            });

            return false;
        }
    }
}

使用回车键阻止表单提交

10 个答案: