Question

我有一个表单，其中包含3个在不同时间启用/禁用的不同按钮。

<html>
    <form method="GET">
        <input type="text" name="test"/>
        <button name="submit1" type="submit">Submit</button>
        <button disabled name="submit2" type="submit">Submit</button>
        <button disabled name="submit3" type="submit">Submit</button>
    </form>
</html>

默认情况下，第一个按钮处于启用状态。如果我的焦点位于表单元素内，然后按Enter，则将触发此按钮并提交表单，其他按钮则被禁用。

但是，如果我启用了第二个按钮而又禁用了第一个按钮，那么当我按Enter键时，表单根本不会提交。

如何使enter键使用未禁用的第一个按钮提交表单？在任何给定的选项卡上，用户将只能看到一个提交按钮，并且它将是启用了整个页面的唯一提交按钮。

Answer 1

一种解决方法是将一个隐藏的“提交”按钮放在始终可以处理Enter键事件的表单顶部。

<form method="GET">
    <button hidden type="submit"></button>
    <input type="text" name="test"/>
    <button disabled name="submit1" type="submit">Submit</button>
    <button name="submit2" type="submit">Submit</button>
</form>

Answer 2

我看到只有一个表单操作和几个提交按钮的唯一原因是当我们要在提交表单之前执行额外的任务时。

我以前就遇到过这种情况，解决方案很简单。首先，如果表单操作仅是一个，则没有理由有多个提交按钮，因此，我的建议是保留默认的隐藏提交按钮的想法，但要使用ID作为目标，并触发点击事件。

您可以尝试我在 TryIt编辑器中创建的示例代码 Sample code

我已注释掉所有三个事件处理程序中的Submit操作，以避免由于表单提交而导致页面重新加载。您将看到，每个选项卡内容中都可以有一个窗体实例，并且在其选项卡中有一个窗体选择器，以防万一这是您的用例，但如果需要，它将被注释掉。即使在document.querySelector('#' + tabName + 'multi-submit-form')仅针对第一次出现的情况下，也要删除选项卡之外的表单实例，以避免麻烦。

我希望这个答案能说明您想要多少控件的想法和灵活性，但是只有一个提交可以在需要时触发。

提交带有第一个按钮的表单，该按钮在具有多个按钮的表单中启用

2 个答案: