禁用表单的输入键答案

【问题标题】：Disabling enter key for form禁用表单的输入键
【发布时间】：2011-08-03 13:00:13
【问题描述】：

我一直在尝试禁用表单上的 Enter 键。我拥有的代码如下所示。由于某种原因，回车键仍在触发提交。代码在我的 head 部分，从其他来源看来是正确的。

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

        return (key != 13);
    },

【问题讨论】：

您是将其附加到表单、提交按钮还是窗口？
所以你给我们的代码你知道有效......并问为什么它不是？附言This fiddle 证明它有效，因此请尝试提供有关您的问题的更多数据。该功能甚至可以运行吗？
如此简单 onkeypress="return event.keyCode != 13;"@YASHGAUTAMI

标签： javascript html window

【解决方案1】：

如果你使用 jQuery，它非常简单。给你

$(document).keypress(
  function(event){
    if (event.which == '13') {
      event.preventDefault();
    }
});

【讨论】：

这行得通，但是如果您需要在代码的特定区域禁用它？示例：您想禁用在表单中输入，但要在顶部导航栏中的搜索器中可用。
选择器可以是你想要的任何东西。 $(document) 是选择器。您可以使用 $("#IDofYourElement") 来选择任何具有 id="IDofYourElement" 的元素。学习 JQuery 选择器，以便您轻松可视化正在发生的事情。否则，您将继续问此类问题以及“如何选择 div 标签？如何选择部分？”。学习规则并应用它是这里的关键。
这很好用，在带有多个 (asp.net) 按钮的 .net 页面上，输入会以某种方式触发错误的功能，现在可以稳定页面，谢谢！

【解决方案2】：

大部分答案都在 jquery 中。您可以在纯 Javascript 中完美地做到这一点，简单且不需要库。这里是：

<script type="text/javascript">
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>

此代码效果很好，因为它只禁用输入类型='text' 的“Enter”按键操作。这意味着访问者仍然可以在 textarea 和整个网页中使用“Enter”键。他们仍然可以通过使用“Tab”键转到“提交”按钮并按“Enter”来提交表单。

这里有一些亮点：

它是纯 javascript（不需要库）。
它不仅会检查按下的键，还会确认是否在 input type='text' 表单元素上按了“Enter”。（这会导致最错误的表单提交
结合上述内容，用户可以在其他任何地方使用“Enter”键。
它简短、干净、快速且直截了当。

如果您还想禁用其他操作的“Enter”，您可以添加 console.log(e);出于您的测试目的，并在 chrome 中按 F12，转到“控制台”选项卡并在页面上按“退格键”并查看其内部以查看返回的值，然后您可以定位所有这些参数以进一步增强代码以上以满足您对 "e.target.nodeName"、"e.target.type" 和还有很多...

【讨论】：

其实应该是e.target.nodeName === 'INPUT' && e.target.type !== 'textarea'。使用指定的代码，如果选中单选框或复选框，它将允许提交表单。
您如何将其限制为按 ID 输入？即仅适用于<input id="noenter">
想通了，在e.target.type=='text'之后添加&&e.target.id=='noenter'
您可能只想在文本区域和按钮上按回车键，所以代码应该是：e.target.type != 'textarea' && e.target.type != 'submit' && e.target.type != 'button'。

【解决方案3】：

在你的表单标签中粘贴这个：

onkeypress="return event.keyCode != 13;"

例子

<input type="text" class="search" placeholder="search" onkeypress="return event.keyCode != 13;">

如果您想在键入并忽略 ENTER 时进行搜索，这可能很有用。

/// Grab the search term
const searchInput = document.querySelector('.search')
/// Update search term when typing
searchInput.addEventListener('keyup', displayMatches)

【讨论】：

请注意，根据 MDN，onkeypress 现在被认为已过时，应该使用 keydown。

【解决方案4】：

试试这个^^

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

希望对你有帮助

【讨论】：

这是一个比选中的更好的解决方案，因为它只会选中选中的表单。我建议在表单中添加一个 ID 或类并以这种方式选择它。我可以看到另一个开发人员出现，开发他们自己的表单，并且在您按 Enter 时对他们的表单不起作用感到沮丧。 $("#id-of-form") 甚至更好的$("form.form--disable-enter-key")

【解决方案5】：

对于非 JavaScript 解决方案，请尝试将 <button disabled>Submit</button> 放入表单中，置于任何其他提交按钮/输入之前。我建议在 <form> 开始标记之后立即（并使用 CSS 将其隐藏，accesskey='-1' 将其从制表符序列中取出，等等）

AFAICT，user agents look for the first submit button 在输入中按 ENTER 时，如果该按钮被禁用，则将停止寻找另一个按钮。

表单元素的默认按钮是按树形顺序排列的第一个提交按钮，其表单所有者是该表单元素。

如果用户代理支持让用户隐式提交表单（例如，在某些平台上，当文本字段被聚焦时按下“enter”键会隐式提交表单），那么对于默认按钮具有定义的激活行为必须使用户代理在该默认按钮上运行合成点击激活步骤。

因此，如果默认按钮被禁用，则在使用这种隐式提交机制时不会提交表单。（按钮在禁用时没有激活行为。）

https://www.w3.org/TR/html5/forms.html#implicit-submission

但是，我知道 Safari 10 MacOS 在这里行为不端，即使默认按钮被禁用，也要提交表单。

因此，如果您可以使用 javascript，请插入 <button onclick="return false;">Submit</button>。在 ENTER 时，onclick 处理程序将被调用，并且由于它返回 false，因此提交过程停止。我测试过的浏览器甚至不会进行浏览器验证（关注第一个无效的表单控件、显示错误消息等）。

【讨论】：

THKS，这应该是选择的答案！不需要复杂的代码，不需要像 jQuery 这样的框架，也不需要更改表单的其余部分（或至少提交）以解决问题。 <input type="submit" disabled onclick="return false" style="display:none"></input> 作为第一个控件对我有用。 ......而且我不必改变我的其余表格中的任何内容。有时它实际上对 RTFM 有帮助（在这种情况下是规范 :-)
这似乎完全禁用了按钮，但这似乎不是作者想要的？如果他们在我的船上，他们只是想从输入中取消映射。
@mochsner 你可以有多个提交按钮。第一个被 ENTER 定位（即使它被隐藏），任何其他都可以单击。因此，从技术上讲，不是取消映射 ENTER，而是映射到死提交按钮。同样的事情。

【解决方案6】：

这是纯javascript

        document.addEventListener('keypress', function (e) {
            if (e.keyCode === 13 || e.which === 13) {
                e.preventDefault();
                return false;
            }
            
        });

【讨论】：

【解决方案7】：

这是使用 jQuery 完成此操作的一种简单方法，该方法将其限制为适当的输入元素：

//prevent submission of forms when pressing Enter key in a text input
$(document).on('keypress', ':input:not(textarea):not([type=submit])', function (e) {
    if (e.which == 13) e.preventDefault();
});

感谢这个答案：https://stackoverflow.com/a/1977126/560114。

【讨论】：

【解决方案8】：

解决办法就是这么简单：

用按钮替换类型“提交”

<input type="button" value="Submit" onclick="this.form.submit()" />

【讨论】：

这个解决方案完全打破了禁用 JavaScript 的人的表单。通过使用 JavaScript 覆盖 Enter 键，默认行为对非 JavaScript 浏览器和使用辅助工具的人有效。

【解决方案9】：

只需在您的 HTML 代码中的 <Head> 标签中添加以下代码。它将在表单上的所有字段的输入键上提交表单。

<script type="text/javascript">
    function stopEnterKey(evt) {
        var evt = (evt) ? evt : ((event) ? event : null);
        var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
        if ((evt.keyCode == 13) && (node.type == "text")) { return false; }
    }
    document.onkeypress = stopEnterKey;
</script>

【讨论】：

【解决方案10】：

如果你使用 jQuery，你可以尝试这样的事情。

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

这将等待按键，如果是Enter，它什么也不做。

【讨论】：

【解决方案11】：

我检查了上述所有解决方案，它们都不起作用。唯一可能的解决方案是为表单的每个输入捕获“onkeydown”事件。您需要将 disableAllInputs 附加到页面的 onload 或通过 jquery ready()

/*
 * Prevents default behavior of pushing enter button. This method doesn't work,
 * if bind it to the 'onkeydown' of the document|form, or to the 'onkeypress' of
 * the input. So method should be attached directly to the input 'onkeydown'
 */
function preventEnterKey(e) {
    // W3C (Chrome|FF) || IE
    e = e || window.event;
    var keycode = e.which || e.keyCode;
    if (keycode == 13) { // Key code of enter button
        // Cancel default action
        if (e.preventDefault) { // W3C
            e.preventDefault();
        } else { // IE
            e.returnValue = false;
        }
        // Cancel visible action
        if (e.stopPropagation) { // W3C
            e.stopPropagation();
        } else { // IE
            e.cancelBubble = true;
        }
        // We don't need anything else
        return false;
    }
}
/* Disable enter key for all inputs of the document */
function disableAllInputs() {
    try {
        var els = document.getElementsByTagName('input');
        if (els) {
            for ( var i = 0; i < els.length; i++) {
                els[i].onkeydown = preventEnterKey;
            }
        }
    } catch (e) {
    }
}

【讨论】：

【解决方案12】：

我认为将类设置为表单要好得多。所以我编码：

HTML

<form class="submit-disabled">

JS

/**
 * <Start>
 * Submit Disabled Form
 */
document
    .querySelector('.submit-disabled')
    .addEventListener('submit', function (e) {

        e.preventDefault()
    });
/**
 * </End>
 * Submit Disabled Form
 */

如果您只想在Enter Key 按下时禁用提交：

/**
 * <Start>
 * Submit Disabled Form
 */
document
    .querySelector('.submit-disabled')
    .addEventListener('keypress', function (e) {
        if (e.keyCode === 13) {
            e.preventDefault()
        }
    });
/**
 * </End>
 * Submit Disabled Form
 */

【讨论】：

【解决方案13】：

在 HTML 文件中：

@keypress="disableEnterKey($event)"

在js文件中：

disableEnterKey(e) {
  if (e.keyCode === 13) {
    e.preventDefault();
  }
}

【讨论】：

【解决方案14】：

我在这里找到的更好的方法：

Dream.In.Code

action="javascript: void(0)" 或 action="return false;"（对我不起作用）

【讨论】：

虽然链接上的页面可以包含解决方案，但最好将相关信息放在答案中并仅提供链接作为参考...