使用Javascript更改按下回车键时激活哪个提交按钮

Question

使用Javascript更改按下回车键时激活哪个提交按钮

24

我在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 浏览器中，如果按回车键提交是不希望的，但我不能移除或更改提交按钮的顺序。

~~这是我尝试过的内容，但它无法改变在 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;
    }
}

- steveth45

请尝试使用我下面的示例。使用e.which而不是e.keycode。 - Tester101

这个回答解决了你的问题吗？HTML表单中的多个提交按钮 - Motine

@Motine 看起来我在13年前提出了一个解决方案，就在我问问题的那一刻… - postfuturist

6个回答

4

默认的提交操作是不可见的，这是一个合理的方法，不需要牵扯到JavaScript。然而，具有"display: none"属性的表单元素通常不可靠。我倾向于在页面上其他按钮之前使用绝对定位的提交按钮，将其定位在页面的左侧。虽然还是很丑陋，但可以完成工作。

- bobince

2

使用CSS怎么样？您可以将第一个按钮，即默认按钮，设置在屏幕的可见区域之外，使用"position: absolute; left: -200px; top: -200px;"。据我所记，任何浏览器都不会忽略它，因为它并不是看不见的。这个方法非常有效：

<form method="get">
<input type="text" name="something" value="blah"/>
<input type=submit name="desired" value="Save Earth"
       style="position: absolute; left: -200px; top: -200px;"/>
...
<input type=submit name="something_else" value="Destroy Earth" />
...
<input id="foobar" type=submit name="desired" value="Save Earth" />
</form>

地球得救了...

(该句为原文，已翻译完成)

- coretys

1

“而且地球得救了...”哈哈！ - Nirmal

0

使用单独的表单怎么样？也许我错过了一些使这不可能的东西 :P

- finpingvin

1

是的，各种提交按钮仍然需要从表单中的各个输入框发布的值，因此拆分表单不起作用。 - postfuturist

你不能根据填写了哪些字段在服务器端执行不同的操作吗？ - finpingvin

1

我可以这样做，但这对我的页面没有任何意义，与这个问题完全无关。 - postfuturist

0

只需控制按键事件。在 body 标签中使用 onKeyPress。


onkeypress=CheckKeyPress()

然后处理回车键


function CheckKeyPress(){
    var code;
    if(!e) var e = window.event;
    if(e.keyCode){
        code = e.keyCode;
    }else if(e.which){
        code = e.which;
    }
    if(code == 13){
        //Do Something
    }
}

- Tester101

这段代码只在你放置在 //做些事情的区域内的代码，然后按下回车键时才执行一些操作。 - Tester101

0

不要截获“keydown”事件，而应该截获“submit”事件。

因此：

form.onsubmit = function(e){
   // Do stuff.  Change the form's action or method maybe.  
   return true;
}

- Triptych

嗯，这里的诀窍是要在此函数内部检测它是否是由用户在文本输入框中按下回车键或点击实际提交按钮而到达此处。这可能吗？ - postfuturist

据我所知，不会。当调用onsubmit时，this/e.target/e.srcElement都指向表单元素，而不是按钮。 - some

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- cLFlaVA · Accepted Answer

一种方法是删除所有提交按钮，使用输入按钮来以编程方式提交表单。这将删除通过在文本框中按回车键提交表单的功能。您还可以保留一个提交按钮作为默认提交功能，并使用正常的按钮输入来提交表单并以编程方式提交。

显然的缺陷是用户需要启用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>