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

防止使用 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中文网其他相关文章！