堆栈内存溢出
  繁体   English   中英

使用回车键阻止表单提交

[英]Prevent form submission with enter key

 原文  2009-10-13 21:39:53  8   10    javascript/ jquery/ html

问题描述

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

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

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

10 个解决方案

解决方案1
 52  2009-10-13 22:11:13

您可以模仿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键时，您需要确定哪些选择器需要关注下一个输入。

解决方案2
 34  2012-08-25 15:18:53

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

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

解决方案3
 26 已采纳  2009-10-14 14:20:48

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

  1. 阻止enter键处理除textarea，button，submit之外的表单的任何元素。
  2. 现在，回车键就像一个标签。
  3. 在元素上调用的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;
        }
    }
}

解决方案4
 8  2011-02-03 09:39:19

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

解决方案5
 3  2012-05-17 13:27:24

将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

解决方案6
 0  2009-10-13 21:45:20

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

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

解决方案7
 0  2013-04-01 08:53:33

在我的情况下，我想阻止它只在一个dinamically创建的领域，并激活一些其他按钮，所以它有点不同。 

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

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

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

解决方案8
 0  2016-04-03 01:36:54

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

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

在<HEAD>中 

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;

解决方案9
 0  2016-09-04 06:50:08

我更喜欢@Dmitriy Likhten的解决方案：它只在我改变代码时才有效： 

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

否则脚本不起作用。 使用Firefox 48.0.2

解决方案10
 0  2019-04-17 18:20:49

我修改了Dmitriy Likhten的答案 ，效果很好。 包括如何将该功能引用到事件中。 请注意，您不包含()或它将执行。 我们只是传递参考。 

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

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 阻止在按 Enter 键输入文本时提交表单 防止按 Enter 键提交表单 如果我使用Enter键提交表单，如何防止在Angularjs中提交表单？ 防止“输入”按键表单提交但不是数据列表选择 按下Enter时如何防止表单提交 阻止表单提交进入输入按钮 Angular2阻止在指令内按下回车键提交表单 防止在Angular中按Enter键提交表单 使用回车键提交香草脚本表单 中断“输入”键与表单提交的关联
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM