Question

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

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

        return (key != 13);
    },

Answer 1

如果你使用jQuery，它很简单。你去吧

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

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

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

以下是一些亮点：

它是纯粹的javascript（不需要库）。
它不仅检查按下的键，还确认输入type ='text'表单元素上是否有“Enter”。（这导致最错误的形式提交
与上述一起，用户可以在任何其他地方使用“Enter”键。
简洁，快捷，直截了当。

如果你想为其他动作禁用“Enter”，你可以添加console.log（e）;为了您的测试目的，并在Chrome中点击F12，转到“控制台”选项卡并点击页面上的“退格”并查看其中的内容以查看返回的值，然后您可以定位所有这些参数以进一步增强代码以上是为了满足您对 “e.target.nodeName” ， “e.target.type” 的需求更多...

Answer 3

试试这个^^

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

希望这有帮助

Answer 4

这是使用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。

Answer 5

在表单标签中粘贴以下内容：

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)

Answer 6

这是纯javascript

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

Answer 7

如果你使用jQuery，你可以试试这样的东西。

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

那将等待一个keydown，如果它是 Enter ，它将什么都不做。

Answer 8

只需在HTML代码的<Head>标记中添加以下代码即可。它将在Enter键上表单提交表格中的所有字段。

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

Answer 9

我检查了上述所有解决方案，但他们没有工作。唯一可行的解决方案是赶上“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) {
    }
}

Answer 10

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

AFAICT，{<3}}当输入中出现 ENTER 时，如果该按钮被禁用，则会停止寻找另一个按钮。

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

如果用户代理支持让用户隐式提交表单（例如，在某些平台上点击＆＃34;输入＆＃34;键，而文本字段被重点隐式提交表单），那么这样做是为了默认按钮具有已定义的激活行为的表单必须使用户代理在该默认按钮上运行合成点击激活步骤。

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

user agents look for the first submit button

但是，我知道https://www.w3.org/TR/html5/forms.html#implicit-submission行为不端，即使默认按钮被禁用，也会提交表单。

因此，如果您可以假设javascript，请插入<button onclick="return false;" >Submit</button>。在 ENTER 上，将调用onclick处理程序，并且由于它返回false，因此提交过程将停止。浏览器我已经测试了这个，甚至做了浏览器验证的事情（聚焦第一个无效的表单控件，显示错误信息等）。

Answer 11

解决方案非常简单：

使用按钮替换“提交”类型

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

Answer 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
 */

Answer 13

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

Dream.In.Code

struct Foo<T> { init(value: T) {} } struct Bar {} let bar = Bar() _ = Foo<Bar>(value: bar) // OK _ = Foo(value: bar) // OK, T inferred as Bar _ = Foo<Bar>(value: nil) // Error: error: 'nil' requires a contextual type _ = Foo<Bar?>(value: nil) // OK _ = Foo(value: Optional<Bar>.none) // OK, T inferred as Bar?或action="javascript: void(0)"（对我无效）

禁用表单的输入密钥

13 个答案:

Dream.In.Code