防止按 Enter 键提交表单

IT技术 javascript forms keypress dom-events enter
2021-01-24 18:51:03

我有form两个文本框,一个选择下拉菜单和一个单选按钮enter按键被按下时,我想调用我的 JavaScript 函数,但是当我按下它时,就form被提交了。

按下键form如何防止提交enter

6个回答
if(characterCode == 13)
{
    return false; // returning false will prevent the event from bubbling up.
}
else
{
    return true;
}

好的,假设您在表单中有以下文本框:

<input id="scriptBox" type="text" onkeypress="return runScript(event)" />

为了在按下 Enter 键时从此文本框中运行一些“用户定义”脚本,而不是让它提交表单,这里有一些示例代码。请注意,此功能不进行任何错误检查,而且很可能只能在 IE 中使用。为了正确地做到这一点,您需要一个更强大的解决方案,但您将获得总体思路。

function runScript(e) {
    //See notes about 'which' and 'key'
    if (e.keyCode == 13) {
        var tb = document.getElementById("scriptBox");
        eval(tb.value);
        return false;
    }
}

返回函数的值将提醒事件处理程序不要进一步冒泡事件,并阻止进一步处理按键事件。

笔记:

它已经指出,keyCode现在已经过时下一个最好的替代which已经也被弃用

不幸的key是,现代浏览器广泛支持的受青睐标准在 IE 和 Edge 中有一些狡猾的行为任何比 IE11 更旧的东西仍然需要polyfill

此外,虽然已弃用的警告是关于keyCode和 的不祥之兆which,但删除这些警告将代表对无数遗留网站的巨大破坏性变化。因此,他们不太可能很快就去任何地方。

是的,而不是返回 false。
2021-03-10 18:51:03
虽然我与你的笔记同意keyCodewhich被弃用,我认为开发者应该有助于使通过不支持这种传统的浏览器,尤其是现在,IE是官方正式宣布死亡和边缘采用了铬过渡。无论如何,检查键所具有的不同标识符的好工具是keyjs.dev
2021-03-14 18:51:03
这是可以使用 preventDefualt 的情况吗?
2021-03-24 18:51:03
您可以构建一个有效函数数组,而不是 eval,然后使用 .indexOf() 来检查用户的输入是否在该数组中,如果是,则调用该函数。减少错误/用户搞砸的范围。
2021-03-29 18:51:03
2021-04-07 18:51:03

同时使用event.whichevent.keyCode

function (event) {
    if (event.which == 13 || event.keyCode == 13) {
        //code to execute here
        return false;
    }
    return true;
};
@Agiagnoc 但是这应该附加到什么事件上?
2021-03-22 18:51:03
为什么要同时使用 event.which 和 event.keyCode?
2021-03-23 18:51:03
一些浏览器支持which其他浏览器支持keyCode将两者都包括在内是一种很好的做法。
2021-03-28 18:51:03
也使用keydown事件代替keyupkeypress
2021-04-03 18:51:03
@manish,keypress 为您提供了比 keydown/up 更多的信息。stackoverflow.com/a/9905293/322537
2021-04-03 18:51:03

event.key === "回车"

更新更干净:使用event.key. 没有更多的任意数字代码!

注意:旧属性(.keyCode.which)已弃用。

const node = document.getElementsByClassName("mySelect")[0];
node.addEventListener("keydown", function(event) {
    if (event.key === "Enter") {
        event.preventDefault();
        // Do more work
    }
});

现代风格,带有 lambda 和解构

node.addEventListener("keydown", ({key}) => {
    if (key === "Enter") // Handle press
})

Mozilla 文档

支持的浏览器

可读,是的!清洁器?13 比Enter. 没有诸如“输入”或“输入”之类的问题。如果你能记住“Enter”,你就可以永远记住13它需要更少的空间。
2021-03-19 18:51:03
keyCode已弃用。这比代码中的魔术整数更具可读性和可维护性
2021-03-30 18:51:03
2021年,我相信这是正确的答案。
2021-04-05 18:51:03
这不就是一个宏或别名吗?使用此代码在性能方面有什么好处吗?
2021-04-09 18:51:03
对于那些想知道如何找到key不同键值的人,您可以使用keyjs.dev
2021-04-09 18:51:03

如果您使用 jQuery:

$('input[type=text]').on('keydown', function(e) {
    if (e.which == 13) {
        e.preventDefault();
    }
});
keyup 在提交后被触发,因此不能取消它。
2021-03-20 18:51:03

检测整个文档上按下的 Enter 键:

$(document).keypress(function (e) {
    if (e.which == 13) {
        alert('enter key is pressed');
    }
});

http://jsfiddle.net/umerqureshi/dcjsa08n/3/