如何确定HTML表单上的默认提交按钮？
如何确定HTML表单上的默认提交按钮？
如果表单已提交但未通过任何特定按钮提交，例如
按下 Enter
HTMLFormElement.submit()在JS中使用
浏览器应该如何确定多个提交按钮中的哪一个（如果有的话）用作按下的按钮？
这在两个层面上很重要：
调用
onclick附加到提交按钮的事件处理程序数据发送回Web服务器
到目前为止，我的实验表明：
按下时Enter，Firefox，Opera和Safari使用表单中的第一个提交按钮
按下时Enter，IE使用第一个提交按钮或根本不使用，具体取决于我无法弄清楚的条件
所有这些浏览器根本不使用JS提交
标准说什么？
如果它会有帮助，这是我的测试代码（PHP仅与我的测试方法相关，而不是我的问题本身）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Test</title></head><body><h1>Get</h1><dl><?php foreach ($_GET as $k => $v) echo "<dt>$k</dt><dd>$v</dd>"; ?></dl><h1>Post</h1><dl><?php foreach ($_POST as $k => $v) echo "<dt>$k</dt><dd>$v</dd>"; ?></dl><form name="theForm" method="<?php echo isset($_GET['method']) ? $_GET['method'] : 'get'; ?>" action="<?php echo $_SERVER['SCRIPT_NAME']; ?>"> <input type="text" name="method" />
<input type="submit" name="action" value="Button 1" onclick="alert('Button 1'); return true" />
<input type="text" name="stuff" />
<input type="submit" name="action" value="Button 2" onclick="alert('Button 2'); return true" />
<input type="button" value="submit" onclick="document.theForm.submit();" /></form></body></html>
慕田峪7331174浏览 1038回答 3
3回答
-
繁星淼淼
Andrezj几乎已经把它钉上了......但是这是一个简单的跨浏览器解决方案。采取这样的形式：<form> <input/> <button type="submit" value="some non-default action"/> <button type="submit" value="another non-default action"/> <button type="submit" value="yet another non-default action"/> <button type="submit" value="default action"/></form>并重构：<form> <input/> <button style="overflow: visible !important; height: 0 !important; width: 0 !important; margin: 0 !important; border: 0 !important; padding: 0 !important; display: block !important;" type="submit" value="default action"/> <button type="submit" value="some non-default action"/> <button type="submit" value="another non-default action"/> <button type="submit" value="yet another non-default action"/> <button type="submit" value="still another non-default action"/> <button type="submit" value="default action"/></form>由于W3C规范表明多个提交按钮有效，但忽略了用户代理应如何处理它们的指导，因此浏览器制造商可以按照自己的意愿实施。我发现他们要么在表单中提交第一个提交按钮，要么在当前具有焦点的表单字段之后提交下一个提交按钮。不幸的是，只需添加一种显示风格：无; 不起作用，因为W3C规范表明应该从用户交互中排除任何隐藏元素。所以隐藏在明显的视线中！以上是我最终投入生产的解决方案示例。按Enter键触发默认表单提交是预期的行为，即使存在其他非默认值并且在DOM中的默认提交按钮之前。鼠标/键盘与显式用户输入交互的奖励，同时避免使用javascript处理程序。注意：通过表单的Tab键不会显示任何可视元素的焦点，但仍会导致选择不可见的按钮。要避免此问题，只需相应地设置tabindex属性，并在不可见的提交按钮上省略tabindex属性。虽然将这些样式推广到重要部分似乎不合适，但它们应该阻止任何框架或现有按钮样式干扰此修复。此外，那些内联样式肯定是糟糕的形式，但我们在这里证明了概念...不编写生产代码。
随时随地看视频慕课网APP
JavaScript
Html/CSS