Fatal编程技术网
  • javascript/
  • 使用Javascript更改按enter键激活的提交

使用Javascript更改按enter键激活的提交

javascript html

使用Javascript更改按enter键激活的提交,javascript,html,webforms,submit,user-input,Javascript,Html,Webforms,Submit,User Input,我在HTML页面上有一个表单，其中有多个提交按钮，可以执行不同的操作。但是，当用户在文本输入中键入值并点击enters时，浏览器的行为通常就好像按顺序激活了next submit按钮一样。我希望有一个特定的操作发生，所以我找到了一个解决方案，就是在有问题的文本输入之后，直接在HTML中插入不可见的提交按钮，如下所示： <input type="text" name="something" value="blah"/> <input type=submit name="desir

我在HTML页面上有一个表单，其中有多个提交按钮，可以执行不同的操作。但是，当用户在文本输入中键入值并点击enters时，浏览器的行为通常就好像按顺序激活了next submit按钮一样。我希望有一个特定的操作发生，所以我找到了一个解决方案，就是在有问题的文本输入之后，直接在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" />
编辑：最终解决方案：

适用于所有浏览器，仅在需要时截取enter键：

HTML:

一种方法是删除所有提交按钮，并使用输入按钮以编程方式提交表单。这将删除通过点击文本框中的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>


无标题
只需控制按键事件即可。在车身标签上按键盘


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

因此：

使用单独的表单怎么样？也许我遗漏了一些让这变得不可能的东西：P

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

使用CSS怎么样？您只需设置第一个按钮，即屏幕可见区域外的默认按钮，并带有“位置：绝对；左侧：-200px；顶部：-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>


...
...
地球得救了…

试试下面的例子。使用e.which而不是e。keycode@steveth45看我的例子。。。输入按钮可以很容易地更改为提交按钮。啊哈！单击（）就是答案@为了完整起见，请确保在所有（大多数）常用浏览器中处理该事件。有些人对事件对象的处理方式不同。好吧，如果javascript在其他浏览器中失败，它仍然会正常运行，因为表单被设置为在没有javascript的环境中基本正常工作（webkit可以承受）。顺便说一句，我接受了这个答案，因为它包含让代码正常工作所需的部分，即调用click（）而不是focus（）在TargetSubmit按钮上。嗯，这里的技巧是从函数内部检测它是否是由用户在文本输入中按enter键或单击实际的submit按钮到达的。有可能吗？@steveth45:据我所知，没有。当调用onsubmit时，这个/e.target/e.src元素都指向表单元素，而不是按钮。是的，各种提交按钮仍然需要表单中各种输入的值，因此，拆分表单不起作用。而且，您不能根据填写的字段在服务器端执行不同的操作？我可以，但这对我的页面没有任何意义，并且与此问题完全无关。此代码仅在您将代码放在写有//do something，你按下回车键，地球就被拯救了…LOL！ 

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

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

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