使用 javascript 在 Enter 键上提交表单

Posted

技术标签:

【中文标题】使用 javascript 在 Enter 键上提交表单【英文标题】:Submit form on Enter key with javascript 【发布时间】:2013-12-27 09:29:32 【问题描述】:

我不确定我在这里做错了什么。我希望输入键和单击按钮一样工作。

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

【问题讨论】:

哪个不行?回车键还是按钮? 我在这里找到了解决方案:***.com/questions/29943/… 【参考方案1】:

试试这个:

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

【讨论】:

【参考方案2】:

使用&lt;input type="submit"&gt; 而不是链接。然后回车键会自动生效。

【讨论】:

【参考方案3】:

哦,那是因为 html 表单元素没有将链接识别为按钮,点击.. 你需要用一个按钮来代替它......

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

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

<style type="text/css">
inputbackground-color:white;border:0 none;
</style>

【讨论】:

【参考方案4】:

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

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/试试看。

【讨论】:

【参考方案5】:

只需像这样制作一个隐藏按钮 HTML

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

CSS

#submitbtndisplay:none;

当用户点击输入按钮时,表单将被提交 别忘了输入 type="submit"

【讨论】:

【参考方案6】:

请使用下面的代码 sn-p...应该添加到脚本块中

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

【讨论】:

【参考方案7】:
// 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

【讨论】:

【参考方案8】:

您可以在表单标签中放置一个默认按钮 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>

【讨论】:

如果你想做后面的代码,请参考下面 this.Form.DefaultButton = "Button1";【参考方案9】:

当用户在表单中编辑字段(例如 )时单击提交按钮(或)或按 Enter 时会触发提交事件。直接调用 form.submit() 方法时,不会将事件发送到表单。 check documentation

【讨论】:

以上是关于使用 javascript 在 Enter 键上提交表单的主要内容,如果未能解决你的问题,请参考以下文章

在 Enter 键上提交登录信息 [重复]

如何防止在Enter和Escape键上关闭MFC对话框?

如何在 Javascript 中的 Map 键上使用 .map()

Javascript/Coffeescript 在值相同时对多个键上的对象数组进行排序

JavaScript 返回键上的jQuery选项卡按

在Javascript中加入多个键上的对象数组