javascript - HTML形式のフォーム送信トリガー

Question

HTMLでは、フォームは次のユーザーが送信できます。

• 送信ボタンをクリックする
• 送信ボタンにフォーカスがあるときにEnterキーを押す
• 入力フィールドでEnterキーを押します

フォームの送信に3つの方法のどれが使用されたかを確認する方法はありますか？

Answer 1

keypressユーザーがEnterキーを押しているかどうかをキャプチャするには、jqueryのメソッドを使用します。mousedownクリックをキャプチャする方法とともに。jqueryとHTMLコードは次のようになります。

HTML：

<form id="myForm">
    Name<input type="text" />
    Address<input type="text" />
    <button id="submitBtn" type="button">Submit</button>
</form>

jQueryコード：

$('#submitBtn').keypress(function(event){

    var keycode = (event.keyCode ? event.keyCode : event.which);
    if(keycode == '13'){
        alert('You pressed "enter" key on the submit button');  
    }
    event.stopPropagation();

});

$('#myForm').keypress(function(event){

    var keycode = (event.keyCode ? event.keyCode : event.which);
    if(keycode == '13'){
        alert('You pressed "enter" key in the input field');    
    }
    event.stopPropagation();
});

$('#submitBtn').mousedown(function(event){
   alert('You clicked submit'); 
   event.stopPropagation();
});

JsFiddle

Answer 2

私の知る限り、HTMLには組み込みの方法はありません。必要なイベントをキャッチし、状態をメモリに保持する必要があります。次のようなもの：

• bool入力がフォーカスを受け取ったら、a を true に設定します。フォーカスを失ったら false に戻します。
• boolボタンがフォーカスを受け取ったら、a を true に設定します。フォーカスを失ったら false に戻します。
• ボタンのクリック イベントをサブスクライブし、aboolを trueに設定します。
• キーボードの keydown イベントをサブスクライブし、それがエンター キーかどうかを確認し、aboolを true に設定します。

これで、ユーザーがフォームを送信するために行ったアクションを知るために必要な情報が得られました。jQuery は、これらすべてのイベントを支援できるはずです。

また、フォームにフォーカスがあり（ボタンや入力だけでなく）、Enterキーを押したときにもフォームが送信されると思います。これがフォーカスを持つ実際のフォームなのか、フォーム内のコントロールなのかはわかりません。

したがって、達成しようとしているものには、ハッキングが必要になります。他の方法でユーザーに必要なエクスペリエンスを提供できないと確信していますか?

Answer 3

各アクションに異なる機能を適用するだけです。フォームがデフォルト アクションを起動しないようにするには、コールバック関数にreturn false;またはを配置する必要event.preventDeafult();があります。

例を参照してください: http://jsfiddle.net/6krYM/

HTML:

<form>
    <input type='text' id='input'>
    <input type='submit' value='submit' id='submit-button'>
</form>

JavaScript:

$("#submit-button").click(function(){
    alert("click on submit button");
    return false;
});

$("#input").keypress(function(e){
    if (e.which == 13){
        e.preventDefault();
        alert("press enter in text");
    }
});

$("#submit-button").keypress(function(e){
    if (e.which == 13){
        alert("press enter on button");
    }
    return false;
});