使用JavaScript在按下Enter键时提交表单

Question

我不确定我在这里做错了什么。我希望回车键和点击按钮都能起作用。

<form action="" method="get" class="priceOptionForm" name="priceOptionForm">
   <input name="paypal_email" type="text" value="whatever" id="email" />
   <a href="javascript:void(0);" class="bluebtn" id="profile_price" style="width:60px;margin-top:5px;">Save all</a>
</form>

- Mauro Golin

---

哪一个不起作用？回车键还是按钮？ - Xymostech

我在这里找到了解决方案：https://dev59.com/-3VD5IYBdhLWcg3wR5go - James Gentes

Answer 1

试试这个：

document.getElementById('email').onkeydown = function(e){
   if(e.keyCode == 13){
     // submit
   }
};

- Ringo

Answer 2

请使用以下代码片段...它应该添加到脚本块中。

<script>
    document.onkeydown=function(evt){
        var keyCode = evt ? (evt.which ? evt.which : evt.keyCode) : event.keyCode;
        if(keyCode == 13)
        {
            //your function call here
        }
    }
</script>

- Anooj VM

Answer 3

所有以下代码都应该添加到脚本块或文件中。 定义提交函数：

function submitForm(){
    document.priceOptionForm.submit();
    document.priceOptionForm.method='post';
}

使回车键提交表单:

document.onkeydown=function(){
    if(window.event.keyCode=='13'){
        submitForm();
    }
}

为了使链接生效：

document.getElementById("profile_price").onclick=submitForm;

你可以参考http://jsfiddle.net/honglonglong/YMX2q/进行尝试。

- 夏至夕陽

Answer 4

使用<input type="submit">代替链接，这样回车键就会自动生效。

- sbking

---

不错，但是要注意如果你的表单上有某种与“onSubmit”相关的JavaScript验证。 - statosdotcom

Answer 5

只需像这样创建一个隐藏的按钮
HTML

<input type="submit" id="submitbtn"  />

CSS

#submitbtn{display:none;}

当用户按下 Enter 键时，表单将被提交。
不要忘记添加 type="submit"。

- Shenanigans1

---

<input type="submit" style="display: none;" /> - Boontawee Home

Answer 6

// Process form if use enter key. put script in head.    
document.onkeyup = enter;    
function enter(e) {if (e.which == 13) submitForm();}

// uses keyup not down as better practice imo    
// submitForm() is user function that posts the form

- iGuest

Answer 7

你可以在表单标签中放置一个默认按钮ID，它会自动触发。

<form id="form1" runat="server" defaultbutton="Button1">

<asp:Button ID="Button1" runat="server" Text="Button"

    OnClick = "Button1_Click" />

<asp:Button ID="Button2" runat="server" Text="Button"

    OnClick = "Button2_Click" />

<asp:Button ID="Button3" runat="server" Text="Button"

    OnClick = "Button3_Click" />

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

</form>

- Nandhu

---

如果你想要进行代码后台操作，请参考以下内容：this.Form.DefaultButton = "Button1"; 请将其翻译为中文。 - Nandhu

Answer 8

那是因为 HTML 表单元素不能将链接识别为按钮，要进行单击操作，需要将其替换为按钮...

<input type="submit" value="this will display on your button" onClick="javascript:void(0)">

但如果你想让它看起来像一个链接，你应该在CSS中这样做

<style type="text/css">
input{background-color:white;border:0 none;}
</style>

- Viraj Shah

Answer 9

当用户点击提交按钮（<button>或<input type="submit">）或在编辑表单字段（例如<input type="text">）时按下回车键，提交事件将触发。直接调用form.submit()方法时，该事件不会发送到表单。 查看文档

- Mamé

Answer 10

你可以在标签中使用onKeyDown。

以下是它的详细信息。

const handleKeyDown = (e) => {
   if(e.key === "Enter") {
        //form actions
   }
}

<form action="" method="get" class="priceOptionForm" name="priceOptionForm">
   <input name="paypal_email" type="text" value="whatever" id="email" onKeyDown={handleKeyDown} />
   <a href="javascript:void(0);" class="bluebtn" id="profile_price" style="width:60px;margin-top:5px;">Save all</a>
</form>

- Alchemist