首页 >web前端 >js教程 >如何防止使用 ENTER 键提交表单?

如何防止使用 ENTER 键提交表单?

Barbara Streisand
Barbara Streisand原创
2024-11-07 18:50:03999浏览

How to Prevent Form Submission with the ENTER Key?

防止使用 ENTER 键提交 Web 表单

防止 ENTER 按键触发表单提交是 Web 开发中的常见要求。以下是如何在基于 Web 的应用程序中实现此行为:

解决方案:

要在保留文本区域行为的同时禁用 ENTER 按键时的表单提交,请使用以下代码:

function checkEnter(e) {
    e = e || event;
    var txtArea = /textarea/i.test((e.target || e.srcElement).tagName);
    return txtArea || (e.keyCode || e.which || e.charCode || 0) !== 13;
}

然后,向表单添加按键处理程序:

document.querySelector('form').onkeypress = checkEnter;

替代方法(现代):

更现代的方法使用事件委托的方法如下:

document.addEventListener(`keypress`, handle);

function handle(evt) {
    const form = evt.target.closest(`#testForm`);
    if (form) {
        if (evt.target.dataset.enterForSubmit) {
            if (evt.key === `Enter`) {
                evt.preventDefault();
                return logClear(`won't submit "${evt.target.value}"`);
            }
            return true;
        }
    }
}

在这种情况下,HTML 元素可以使用 data-enter-for-submit="1" 进行注释,以选择性地允许基于 ENTER 的表单提交。

以上是如何防止使用 ENTER 键提交表单?的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn