23

我在 HTML 页面上有一个表单，其中包含执行不同操作的多个提交按钮。但是，当用户在文本输入中键入一个值并按 Enter 键时，浏览器通常会表现得好像下一个提交按钮按顺序被激活了一样。我想要一个特定的动作发生，所以我发现的一个解决方案是在有问题的文本输入之后直接将不可见的提交按钮放入 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 并将焦点设置在正确的提交上不起作用。

当用户在 HTML 表单的文本输入中按下回车键时，是否有任何方法使用 Javascript 或其他方式来选择将使用哪个提交按钮？

编辑：为了澄清，表单不能要求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;
    }
}
4

6 回答 6

5

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

明显的缺点是用户需要启用 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>
于 2008-12-19T20:56:47.507 回答
4

不可见的默认提交操作是一种合理的方法，不会将 JavaScript 拖入等式。然而，带有“display: none”的表单元素通常并不可靠。我倾向于在页面上的其他按钮之前使用绝对定位的提交按钮，位于页面的左侧。它仍然很丑陋，但可以完成工作。

于 2008-12-20T14:21:36.383 回答
2

使用 CSS 怎么样？您可以只设置第一个按钮，即屏幕可见区域之外的默认按钮，设置为“位置：绝对；左侧：-200 像素；顶部：-200 像素；”。据我所知，任何浏览器都不会忽略它，因为它不是不可见的。这工作得很好：

<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>

地球得救了……

于 2010-01-01T12:42:04.570 回答
0

只需控制按键事件。将 onKeyPress 放在 body 标签中


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
    }
}
于 2008-12-19T21:19:45.870 回答
0

不拦截keydown事件，拦截submit事件。

所以：

form.onsubmit = function(e){
   // Do stuff.  Change the form's action or method maybe.  
   return true;
}
于 2008-12-19T21:25:43.317 回答
0

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

于 2008-12-19T21:49:09.943 回答