在按 Enter 键时阻止表单提交

javascript dom-events forms enter keypress

2022-08-29 23:37:19

我有一个带有两个文本框，一个选择下拉列表和一个单选按钮。当按下键时，我想调用我的JavaScript函数，但是当我按下它时，它被提交。formenterform

如何防止在按下键时提交？formenter

答案 1

if(characterCode == 13) {
    // returning false will prevent the event from bubbling up.
    return false; 
} 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;
    }
}

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

注意：

有人指出，现在已经弃用了。下一个最佳替代方案也已被弃用。keyCodewhich

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

此外，虽然弃用的警告非常不祥，但删除这些警告将代表对无数遗留网站的巨大破坏性变化。出于这个原因，他们不太可能很快去任何地方。keyCodewhich

答案 2

同时使用和：event.whichevent.keyCode

function (event) {
    if (event.which == 13 || event.keyCode == 13) {
        //code to execute here
        return false;
    }
    return true;
};