HTMLでは、フォームは次のユーザーが送信できます。
- 送信ボタンをクリックする
- 送信ボタンにフォーカスがあるときにEnterキーを押す
- 入力フィールドでEnterキーを押します
フォームの送信に3つの方法のどれが使用されたかを確認する方法はありますか?
HTMLでは、フォームは次のユーザーが送信できます。
フォームの送信に3つの方法のどれが使用されたかを確認する方法はありますか?
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();
});
私の知る限り、HTMLには組み込みの方法はありません。必要なイベントをキャッチし、状態をメモリに保持する必要があります。次のようなもの:
bool
入力がフォーカスを受け取ったら、a を true に設定します。フォーカスを失ったら false に戻します。bool
ボタンがフォーカスを受け取ったら、a を true に設定します。フォーカスを失ったら false に戻します。bool
を trueに設定します。bool
を true に設定します。これで、ユーザーがフォームを送信するために行ったアクションを知るために必要な情報が得られました。jQuery は、これらすべてのイベントを支援できるはずです。
また、フォームにフォーカスがあり(ボタンや入力だけでなく)、Enterキーを押したときにもフォームが送信されると思います。これがフォーカスを持つ実際のフォームなのか、フォーム内のコントロールなのかはわかりません。
したがって、達成しようとしているものには、ハッキングが必要になります。他の方法でユーザーに必要なエクスペリエンスを提供できないと確信していますか?
各アクションに異なる機能を適用するだけです。フォームがデフォルト アクションを起動しないようにするには、コールバック関数に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;
});