使用Javascript更改输入按键时激活的提交 [英] Use Javascript to change which submit is activated on enter key press
问题描述
我在HTML页面上有一个表单，其中有多个提交按钮，可执行不同的操作。但是，当用户在文本输入中键入值并点击输入时，浏览器通常表现为按顺序激活下一个提交按钮。我想要一个特定的动作发生，所以我发现一个解决方案是在有问题的文本输入之后直接将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这样的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表单上的文本输入中的回车键时，有没有办法使用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从根本上工作。如果没有Javascript在webkit浏览器上输入密钥提交是不可取的，我不在乎，但我无法删除或更改提交按钮的顺序。
这是我尝试过的，它不会改变webkit浏览器中的提交行为。
改变焦点（）的作用是什么？在以下代码中 click（）。
This is what I tried, it doesn't change the submission behavior in webkit browsers.
What worked is to change the focus() in the following code to 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更改输入按键时激活的提交的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
