Ste*_*art 201 html javascript standards cross-browser
如果表单已提交但未通过任何特定按钮提交,例如
HTMLFormElement.submit()在JS中使用浏览器应该如何确定多个提交按钮中的哪一个(如果有的话)用作按下的按钮？
这在两个层面上很重要:
onclick附加到提交按钮的事件处理程序到目前为止,我的实验表明:
标准说什么？
如果它会有所帮助,这是我的测试代码(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>
And*_*yle 109
如果您通过Javascript(即formElement.submit()或任何等效的)提交表单,则没有一个提交按钮被认为是成功的,并且它们的值都不包含在提交的数据中.(请注意,如果您通过使用提交表单,那么您提交的submitElement.click()提交被认为是活动的;这并不属于您的问题的范围,因为这里提交按钮是明确的但我认为我会包含它对于那些阅读第一部分并想知道如何通过JS表单提交成功提交按钮的人来说.当然,表单的onsubmit处理程序仍将以这种方式触发,而它们不会通过form.submit()这样的另一个水壶......)
如果通过在非textarea字段中按Enter键来提交表单,那么它实际上是由用户代理决定它想要的内容.该规范不说如何使用,而在文本输入字段回车键提交表单什么(如果你标签的按钮,使用空间或任何激活它,然后还有为特定的提交按钮是没有问题的明确使用).它只是表示必须在激活提交按钮时提交表单,甚至不要求输入例如文本输入将提交表单.
我相信Internet Explorer会选择首先出现在源中的提交按钮; 我有一种感觉,Firefox和Opera选择具有最低tabindex的按钮,如果没有其他定义,则回退到第一个定义的按钮.关于提交是否具有非默认值属性IIRC,也存在一些复杂性.
需要注意的是,对于此处发生的事情没有明确的标准,而且完全是浏览器的一时兴起 - 所以尽可能在你正在做的事情中,尽量避免依赖任何特定的行为.如果你真的必须知道,你可能会发现各种浏览器版本的行为,但是当我调查这一段时间后,有一些非常复杂的条件(当然可能会随着新的浏览器版本而改变)并且我建议如果可能的话,你要避免它!
Jam*_*mes 60
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属性.虽然将这些样式推广到重要部分似乎不合适,但它们应该阻止任何框架或现有按钮样式干扰此修复.此外,那些内联样式肯定是糟糕的形式,但我们在这里证明了概念...不编写生产代码.
Rod*_*ero 16
我想如果有人想用jQuery做这篇文章会有所帮助:
http://greatwebguy.com/programming/dom/default-html-button-submit-on-enter-with-jquery/
基本解决方案是:
$(function() {
$("form input").keypress(function (e) {
if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
$('input[type=submit].default').click();
return false;
} else {
return true;
}
});
});
另一个我喜欢的是:
jQuery(document).ready(function() {
$("form input, form select").live('keypress', function (e) {
if ($(this).parents('form').find('button[type=submit].default, input[type=submit].default').length <= 0)
return true;
if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
$(this).parents('form').find('button[type=submit].default, input[type=submit].default').click();
return false;
} else {
return true;
}
});
});
我有一个带有11个提交按钮的表单,当用户按下回车键时,它总是会使用第一个提交按钮.我在别处读到,在表单上有多个提交按钮不是一个好主意(不好的做法),最好的方法是将默认按钮作为表单上的唯一提交按钮.其他按钮应设置为"TYPE = BUTTON",并添加一个onClick事件,在Javascript中调用您自己的提交例程.像这样: -
<SCRIPT Language="JavaScript">
function validform()
{
// do whatever you need to validate the form, and return true or false accordingly
}
function mjsubmit()
{
if (validform()) { document.form1.submit(); return true;}
return false;
}
</SCRIPT>
<INPUT TYPE=BUTTON NAME="button1" VALUE="button1" onClick="document.form1.submitvalue='button1'; return mjsubmit();">
<INPUT TYPE=BUTTON NAME="button2" VALUE="button2" onClick="document.form1.submitvalue='button2'; return mjsubmit();">
<INPUT TYPE=SUBMIT NAME="button3" VALUE="button3" onClick="document.form1.submitvalue='button3'; return validform();">
<INPUT TYPE=BUTTON NAME="button4" VALUE="button4" onClick="document.form1.submitvalue='button4'; return mjsubmit();">
这里,button3是默认设置,虽然您以编程方式使用其他按钮提交表单,但mjsubmit例程会验证它们.HTH.
现在可以使用flexbox以下方法解决：
的HTML
<form>
<h1>My Form</h1>
<label for="text">Input:</label>
<input type="text" name="text" id="text"/>
<!-- Put the elements in reverse order -->
<div class="form-actions">
<button>Ok</button> <!-- our default action is first -->
<button>Cancel</button>
</div>
</form>
的CSS
.form-actions {
display: flex;
flex-direction: row-reverse; /* reverse the elements inside */
}
说明
使用flex框，我们还可以display: flex通过使用CSS规则来反转使用的容器中元素的顺序flex-direction: row-reverse。这不需要CSS或隐藏元素。对于不支持flexbox的较旧的浏览器，它们仍然可以使用可行的解决方案，但是这些元素不会被颠倒。
演示
http://codepen.io/Godwin/pen/rLVKjm
| 归档时间： |
|
| 查看次数： |
167368 次 |
| 最近记录： |