使用JavaScript来改变其提交被激活上输入按键

StackOverflow https://stackoverflow.com/questions/382171

题

我有多个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" />

这就像在大多数浏览器魅力，但它并没有在WebKit浏览器如Safari和Chrome。出于某种原因，他们跳过了无形的提交按钮。我一直在试图找出如何拦截输入按键并激活使用Javascript正确提交，但我一直没能得到它的工作。拦截KeyDown和上设置适当的焦点提交不起作用。

是否有使用Javascript或以其它方式，当用户点击在文本输入确认键HTML表单中选择哪个提交按钮将被使用的任何方式？

编辑：澄清，表格不能都需要Javascript为“工作”从根本。我不在乎，如果回车键提交不希望的是没有JavaScript的WebKit浏览器，但我不能删除或修改提交按钮的顺序。的

<击>这是我试过了，它不会在WebKit浏览器更改提交行为。点击 什么工作是要改变的焦点（）的在下面的代码的点击（）的。

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;
    }
}
有帮助吗？

解决方案

的一种方法是，以除去所有的提交按钮，并使用输入按钮以编程提交表单。这将消除由击中一个文本框回车键提交表单的能力。您也可以留下一个提交按钮为默认提交功能，并使用常规的按钮输入为他人和编程提交表单。

这样做的明显的短下降是用户将需要启用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>

其他提示

在看不见的默认提交操作是一种合理的方法，并且不拖动的JavaScript入方程。然而，随着形式元素的显示：无'通常不可靠。我倾向于使用绝对定位在页面上的其他人之前提交按钮，定位到页面的左侧边。这仍然是相当难看，但能够完成任务。

如何使用CSS？你可以只设置第一个按钮，你的默认按钮在屏幕的可见区域之外使用“的位置是：绝对的;左：-200px;顶部：-200px;”。至于我remeber，它不会被任何浏览器忽略，因为它不是无形的。这只是正常：

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

和地球会保存...

只要控制所述键按压事件。放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
    }
}

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

这样：

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

关于使用单独的形式是什么？也许我失去了一些东西，这使得这个不可能的：P

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top