javascript - 检测提交类型,如果是通过回车键或按钮单击

标签 javascript html forms

我有以下代码:

    <head>
        <script language="javascript">
            function subimiti(event){
                alert("Tipo do submit: "+event);
            }
        </script>
    </head>
    <body>
        <form id="f1" name="form1" onsubmit="subimiti(event)" action="http://www.google.com">
            <input type="text" id="meuId" value="Teste"/>
            <input id="butao" type="submit" value="Subimeta u fórmi trem bão!!"/>
        </form>

在我的 JavaScript 函数中,我想检测导致表单提交的事件。如果它是通过我的文本字段中的回车键,或者如果它是通过单击按钮。

最佳答案

由于按键事件会在有提交按钮时触发点击事件,所以我能想到的唯一解决方法是改用 type=button。

纯 javascript ( Fiddle ):

<form id="f1" name="form1" action="" onsubmit="subimiti(this)" method="POST">
  <input type="text" id="meuId" value="Test" onkeypress="setEvent(event)"/>
  <input id="butao" type="button" onclick="setEvent(event)" value="Subimeta u formi trem bao!!"/>
</form>

function subimiti(form)
{
  event.preventDefault();
  alert(form.getAttribute('event'));   

}

function setEvent(event)
{
 if(event.type == 'click')
 {
   document.form1.setAttribute('event','click');
   subimiti(document.form1);
 }
 else if (event.keyCode == 13)
 {
   document.form1.setAttribute('event','keypress');
 }
}

使用 jQuery(在我看来更简洁/更简单的代码):

$(function(){
  $('form').submit(function(){
    alert($(this).attr('event'));
  });

  $("input#butao").on('click', function(e) {
    $("form").attr("event", "click").submit();
  });      

  $("input").on('keypress', function(e) {
    if (e.which == 13)
    {
      $("form").attr("event", "keypress");
    }
  });            
}); 

只有 butao 有一个 click 监听器,任何输入都有 enter 监听器。

<form id="f1" name="form1" action="">
  <input type="text" id="meuId" value="Teste"/>
  <input id="butao" type="button" value="Subimeta u formi trem bao!!"/>
</form>

Fiddle (将 preventDefault 添加到 fiddle 中,这样您就可以在不实际提交的情况下看到结果)

关于javascript - 检测提交类型,如果是通过回车键或按钮单击,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17329441/

相关文章:

javascript - 使用 jquery 创建嵌套的 json 对象

javascript - 使用 D3 跳转 JSON

javascript - 如何将 HTML5 范围 slider 值组合在一起?

javascript - 使用 onchange 提交获取多个复选框值

forms - 打印表单的内容

javascript - 使用 1 个按钮的 jQuery slideToggle div

javascript - 从脚本文件而不是从 CLI 运行 Angular CLI 脚本?本地化/国际化

javascript - 在 Javascript 中向字符串添加格式方法。

javascript - 禁用输入类型=数字的输入验证

html - 无法调整 PayPal 按钮上方和下方的填充/间距?