フォームフィールドにEnterキーをシミュレートし、他のハンドラを保存する

Question

開発中のソフトウェアをフォームフィールドに結びつけるための一般的なアプローチを試みています。

これまでは非常に優れていましたが、他のハンドラが結び付けられているフォーム/フィールドを送信できないようにするために、私たちは苦境に陥っています。ここで

は（凝縮）ユースケースです：

HTML：

<form id="form1"> 
    <input type=field id="field1"/> 
</form> 
<a href="#" id="link">click to submit</a> 

通常の動作では、ユーザーがフィールドに「foo」とヒットを入力したときに、フォームが処理さに提出されていることですフォームの開始タグで必ずしも定義されていない正しい「エンドポイント」。この入力イベントを処理する関数が（他のどこかから）存在する可能性があります。

残念ながら、私たちはその機能が何であるかを予測することはできません。私たちはそれを一般的なものにしておきたいと思います。

上記のHTMLでは、リンクをクリックするとブラウザ/ユーザーの動作、したがって未知のハンドラを模倣するフォームフィールドのenterイベントが発生するはずです。フィールドに「foo」を入力して押しはフォームが送信されます入力すると

$('#field1').keypress(function (event) { 
    if (event.which == 13) { 
    console.log("enter pressed"); 
    //return false; only if needed 
    } 
}); 

$("#link").click(function() { 
    var e = jQuery.Event('keypress'); 
    e.which = 13; // #13 = Enter key 
    $("#field1").focus(); 
    $("#field1").trigger(e); 
}) 

：

これが私たちのJavscript（私たちはjqueryのを使用している）です。しかし、リンクをクリックするとfocus（）を実行してキーイベントを発生させますが、フォームはに送信されません。

私たちは未知のハンドラのためにsubmit（）を使用できません。

は、ここでのコードを試してみてください。 http://codepen.io/conversify/pen/yOjQob

Answer 1

キーを押下するとどうなるか、である

var formHandler = function(e) { 
    // ... code to submit form ... 
    console.log("form handled"); 
};  

は、このようなあなたのkeypressハンドラが設定しましたフォームは、フォームが提出されます。これがデフォルト動作です。キープレスをシミュレートするときは、デフォルトの動作が妨げられていない限り、同じ操作を行う必要があります。

$('#field1').keypress(function (event) { 
    if (event.which == 13) { 
    console.log("enter pressed"); 
    // event.preventDefault(); if needed 
    } 
}); 

$("#link").click(function() { 
    var e = jQuery.Event('keypress'); 
    e.which = 13; // #13 = Enter key 
    $("#field1").focus(); 
    $("#field1").trigger(e); 
    var form=$("#field1").closest("form"); 
    if(form&&!e.isDefaultPrevented()) form.submit(); 
}) 

今、あなたはあなたのハンドラにイベントオブジェクトを渡すことができ、彼らがそうしたい、またはあなたのキー押下ハンドラでそれを防ぐことができれば、彼らは提出するのを防ぐことができます。

Answer 2

あなたはunbind('submit')を使用して、未知のハンドラをバインド解除してから、次のようなsubmit()を使用することができます。

$("#link").click(function() { 
    $("#form1").unbind('submit').submit(); 
}); 

Answer 3

入力ハンドラとクリックハンドラからフォームハンドラを分離する必要があります。

$('#field1').keypress(function (event) { 
    if (event.which == 13) { 
    formHandler(); 
    } 
}); 

そして、このようなあなたのクリックハンドラ：入力が内部であれば

$("#link").click(function() { 
    formHandler(); 
});