12

次のコードがあります。

    <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 関数では、フォームの送信を引き起こすイベントを検出したいと考えています。テキストフィールドのエンターキーによるものか、ボタンのクリックによるものか。

4

1 に答える 1

5

送信ボタンがあるときに keypress イベントがクリック イベントを発生させるため、考えられる唯一の回避策は、代わりに type=button を使用することです。

純粋な JavaScript (フィドル):

<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 専用のクリック リスナーがあり、任意の入力用の入力リスナーがあります。

<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 に追加しました)

于 2013-06-26T22:14:28.187 に答える