使用 Javascript 更改按 Enter 键时激活的提交 [英] Use Javascript to change which submit is activated on enter key press
问题描述
我在 HTML 页面上有一个表单，其中包含多个执行不同操作的提交按钮.然而，当用户在文本输入中输入一个值并按回车键时，浏览器的行为通常就像下一个提交按钮被依次激活一样.我想要一个特定的动作发生，所以我找到的一个解决方案是在有问题的文本输入之后直接将不可见的提交按钮放入 HTML，如下所示:
I have a form on an HTML page with multiple submit buttons that perform different actions. However, when the user is typing a value into a text input and hit enters, the browsers generally act as though the next submit button sequentially was activated. I want a particular action to occur, so one solution I found was to put in invisible submit buttons into the HTML directly after the text inputs in question, like this:
<input type="text" name="something" value="blah"/>
<input type=submit name="desired" value="Save Earth" style="display: none"/>
...
<input type=submit name="something_else" value="Destroy Earth" />
...
<input id="foobar" type=submit name="desired" value="Save Earth" />
这在大多数浏览器中都很有效，只是在 Safari 和 Chrome 等 webkit 浏览器中没有.出于某种原因，他们跳过了不可见的提交按钮.我一直在试图弄清楚如何拦截回车键并使用 Javascript 激活正确的提交，但我一直无法让它工作.拦截 keydown 并将焦点设置在正确的提交上是行不通的.
This works like a charm in most browsers, except that it doesn't in webkit browsers like Safari and Chrome. For some reason they skip over the invisible submit button. I've been trying to figure out how to intercept the enter key press and activate the proper submission using Javascript, but I haven't been able to get it to work. Intercepting the keydown and setting focus on the proper submit does not work.
当用户在 HTML 表单上的文本输入中按下 Enter 键时，有没有办法使用 Javascript 或其他方式来选择将使用哪个提交按钮?
Is there any way using Javascript or otherwise to select which submit button will be used when the user hits the enter key in a text input on an HTML form?
澄清一下，表单不能从根本上要求Javascript工作".我不在乎在 webkit 浏览器上没有 Javascript 时回车键提交是否不受欢迎，但我无法删除或更改提交按钮的顺序.
这是我尝试过的，它不会改变 webkit 浏览器中的提交行为.
有效的是将以下代码中的 focus() 更改为 click().
document.onkeypress = processKey;
function processKey(e)
{
if (null == e)
e = window.event ;
if (e.keyCode == 13) {
document.getElementById("foobar").click(); // previously: focus()
}
}
最终解决方案:
适用于所有浏览器，仅在需要时拦截回车键:
Works with every browser and only intercepts the enter key when needed:
HTML:
<input type="text" name="something" value="blah"
onkeydown="return processKey(event)" />
<input type=submit name="desired" value="Save Earth" style="display: none"/>
...
<input type=submit name="something_else" value="Destroy Earth" />
...
<input id="foobar" type=submit name="desired" value="Save Earth" />
Javascript:
Javascript:
function processKey(e)
{
if (null == e)
e = window.event ;
if (e.keyCode == 13) {
document.getElementById("foobar").click();
return false;
}
}
推荐答案
一种方法是删除所有提交按钮并使用输入按钮以编程方式提交表单.这将取消通过在文本框中按回车键来提交表单的能力.您也可以保留一个提交按钮作为默认提交功能，并为其他按钮使用常规按钮输入并以编程方式提交表单.
One way would be to remove all of the submit buttons and use input buttons to submit the form programatically. This would remove the ability to submit the form by hitting the enter key in a textbox. You could also leave one submit button as the default submit functionality, and use regular button inputs for the others and submit the form programatically.
明显的不足是用户需要启用 JavaScript.如果这不是问题，那么您可以考虑一下.
The obvious short-fall of this is that the users would require JavaScript to be enabled. If this isn't a problem this is a consideration for you.
在这里，我尝试为您制作一个使用 jQuery 的示例(无需 jQuery 也可以轻松创建相同的功能)...如果这有帮助，请告诉我...
Here, I tried to make an example for you using jQuery (the same functionality can easily be created without jQuery)... let me know if this helps...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Untitled</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript"><!--
$(document).ready(function(){
$("#f input").filter(":text").keydown( function(event) {
if (event.keyCode==13) {
$(this).nextAll().eq(0).click();
}
});
});
//--></script>
</head>
<body>
<form name="f" id="f">
<input type="text" id="t1" name="t1" /><input type="button" id="b1" name="b1" value="button-one" onclick="alert('clicked enter on textbox 1');" /><br />
<input type="text" id="t2" name="t2" /><input type="button" id="b2" name="b2" value="button-two" onclick="alert('clicked enter on textbox 2');" /><br />
<input type="text" id="t3" name="t3" /><input type="button" id="b3" name="b3" value="button-three" onclick="alert('clicked enter on textbox 3');" /><br />
</form>
</body>
</html>
这篇关于使用 Javascript 更改按 Enter 键时激活的提交的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
