假设您在HTML表单中创建了一个向导。一个按钮后退,一个按钮前进。因为当您按Enter键时,返回按钮首先出现在标记中,它将使用该按钮提交表单。
例子:
< >形式
<!—将光标移至该字段,按“Enter”。—>
<input type="text" name="field1" />
<!这是提交的按钮——>
<input type="submit" name="prev" value="Previous Page" />
<!——但这是我想提交的按钮——>
<input type="submit" name="next" value=" next Page" />
> < /形式
我想要确定当用户按Enter键时使用哪个按钮提交表单。这样,当您按下Enter键时,向导将移动到下一页,而不是上一页。你必须使用tabindex来做这个吗?
问题
一个表单可以有几个提交按钮。
当在任何输入中按return时,浏览器将使用第一个提交按钮。
然而,有时我们想使用不同的/稍后按钮作为默认值。
选项
首先添加一个具有相同操作的隐藏提交按钮(☹️副本)
首先在表单中放入所需的提交按钮,然后通过CSS将其移动到正确的位置(☹️可能不可行,可能导致繁琐的样式)
通过JavaScript改变所有表单输入中的返回键的处理(☹️需要JavaScript)
没有一个选项是理想的,所以我们选3。因为大多数浏览器都启用了JavaScript。
选择解决方案
// example implementation
document.addEventListener('DOMContentLoaded', (ev) => {
for (const defaultSubmitInput of document.querySelectorAll('[data-default-submit]')) {
for (const formInput of defaultSubmitInput.form.querySelectorAll('input')) {
if (formInput.dataset.ignoreDefaultSubmit != undefined) { continue; }
formInput.addEventListener('keypress', (ev) => {
if (ev.keyCode == 13) {
ev.preventDefault();
defaultSubmitInput.click();
}
})
}
}
});
<!-- example markup -->
<form action="https://postman-echo.com/get" method="get">
<input type="text" name="field1">
<input type="submit" name="submit" value="other action">
<input type="submit" name="submit" value="default action" data-default-submit> <!-- this button will be used on return -->
</form>
能够从某些输入中删除增强可能是有用的。这可以通过以下方法实现:
<input type="text" name="field2" data-ignore-default-submit> <!-- uses browser standard behaviour -->
这里有一支完整的码笔。
当我第一次遇到这种情况时,我想出了一个onclick()/JavaScript hack,当选择不是prev/next时,我仍然喜欢它的简单性。它是这样的:
@model myApp.Models.myModel
<script type="text/javascript">
function doOperation(op) {
document.getElementById("OperationId").innerText = op;
// you could also use Ajax to reference the element.
}
</script>
<form>
<input type="text" id = "TextFieldId" name="TextField" value="" />
<input type="hidden" id="OperationId" name="Operation" value="" />
<input type="submit" name="write" value="Write" onclick='doOperation("Write")'/>
<input type="submit" name="read" value="Read" onclick='doOperation("Read")'/>
</form>
当单击任何一个提交按钮时,它将所需的操作存储在一个隐藏字段中(该字段是包含在与表单关联的模型中的字符串字段),并将表单提交给控制器,由控制器进行所有决定。在控制器中,你只需写:
// Do operation according to which submit button was clicked
// based on the contents of the hidden Operation field.
if (myModel.Operation == "Read")
{
// Do read logic
}
else if (myModel.Operation == "Write")
{
// Do write logic
}
else
{
// Do error logic
}
您还可以使用数值操作代码来避免字符串解析,但是除非使用枚举,否则代码可读性较差、可修改性较差、自文档性较差,解析也很简单。