pos*_*ist 21 html javascript webforms user-input submit
我在HTML页面上有一个表单,其中有多个提交按钮,可执行不同的操作.但是,当用户在文本输入中键入值并点击输入时,浏览器通常表现为按顺序激活下一个提交按钮.我想要一个特定的动作发生,所以我发现一个解决方案是在有问题的文本输入后直接将不可见的提交按钮放入HTML中,如下所示:
<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并将注意力集中在正确的提交上是行不通的.
有没有办法使用Javascript或其他方式选择当用户点击HTML表单上的文本输入中的回车键时将使用哪个提交按钮？
编辑:为了澄清,表单不能要求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()
}
}
编辑:最终解决方案:
适用于每个浏览器,只在需要时拦截输入密钥:
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:
function processKey(e)
{
if (null == e)
e = window.event ;
if (e.keyCode == 13) {
document.getElementById("foobar").click();
return false;
}
}
一种方法是删除所有提交按钮并使用输入按钮以编程方式提交表单。这将删除通过在文本框中按 Enter 键来提交表单的功能。您还可以将一个提交按钮保留为默认提交功能，并为其他按钮使用常规按钮输入并以编程方式提交表单。
其明显的缺陷是用户需要启用 JavaScript。如果这不是问题，那么这就是您的考虑因素。
编辑：
在这里，我尝试使用 jQuery 为您制作一个示例（无需 jQuery 也可以轻松创建相同的功能）...请告诉我这是否有帮助...
<!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>