質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
イベントハンドラ

マウスのクリックなどの特定の事象(イベント)が発生した時に実行される処理のことをイベントハンドラと呼びます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

3回答

9254閲覧

submitイベントハンドラ関数の中で <input type="submit"> を得るには?

think49

総合スコア18156

イベントハンドラ

マウスのクリックなどの特定の事象(イベント)が発生した時に実行される処理のことをイベントハンドラと呼びます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

2グッド

1クリップ

投稿2015/11/24 09:59

編集2015/12/02 12:38

submit イベントハンドラ関数の中で <input type="submit"> を得る方法はないでしょうか。

HTML

1<form> 2 <p><input type="text" name="id"></p> 3 <p> 4 <input type="submit" value="submit1"> 5 <input type="submit" value="submit2"> 6 </p> 7</form> 8<script> 9'use strict'; 10document.querySelector('form').addEventListener('submit', function (event) { 11 // ここで submit ボタンを取得したい 12 console.log(event.type, event.target); 13 event.preventDefault(); 14}, false); 15</script>

click イベントで得られるのは分かりますが、submit イベントハンドラ関数のスコープに引き渡す為に面倒な手順が必要になるので積極的に使いたくはありません。

JavaScript

1'use strict'; 2(function () { 3 function handleSubmit (event) { 4 console.log(event.type, this.submit); 5 console.log(event.type, 'activeElement', event.target.ownerDocument.activeElement); 6 event.preventDefault(); 7 this.submit = null; 8 } 9 10 function handleClick (event) { 11 var input = event.target; 12 13 if (input.tagName === 'INPUT' && input.type === 'submit') { 14 this.submit = input; 15 console.log(event.type, input); 16 } 17 } 18 19 function handleClickSubmit (event) { 20 switch (event.type) { 21 case 'click': 22 handleClick.call(this, event); 23 break; 24 case 'submit': 25 handleSubmit.call(this, event); 26 break; 27 } 28 } 29 30 function main () { 31 var form = document.querySelector('form'), 32 listener = { 33 handleEvent: handleClickSubmit, 34 submit: null 35 }; 36 37 form.addEventListener('submit', listener, false); 38 form.addEventListener('click', listener, false); 39 } 40 41 main(); 42}());

何かスマートな解決法がないものでしょうか。

(2015/11/24 21:36追記)
click イベントを併用するコードを追記しました。
現状ではこのコードが最善だと思っていますが、更にスマートな方法を求めています。

(2015/11/26 21:20追記)
listener オブジェクトを共有する事で handleSubmit 上位スコープに listner オブジェクトを置かなくて済むようにコードを修正しました。

(2015/12/02 21:38追記)
eripong さんに Firefox 独自拡張の event.explicitOriginalTarget を紹介して頂きました。

eripong, tozjp👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

ベストアンサー

汚い方法ですが、clickイベントでformにinputを入れておくと、できました。

click イベントでformに保存して submit イベントハンドラ関数内で input[type=submit] を得る - JSFiddle

lang

1'use strict'; 2(function () { 3 function handleSubmit (event) { 4 var form = event.target; 5 if (form.submitElement) { 6 console.log(event.type, form.submitElement); 7 form.submitElement = null; 8 } 9 event.preventDefault(); 10 } 11 12 function handleClick (event) { 13 var input = event.target; 14 15 if (input.tagName === 'INPUT' && input.type === 'submit') { 16 input.form.submitElement = input; 17 } 18 } 19 20 function main () { 21 var form = document.querySelector('form'); 22 23 form.addEventListener('submit', handleSubmit, false); 24 form.addEventListener('click', handleClick, false); 25 } 26 27 main(); 28}());

投稿2015/11/25 11:35

eripong

総合スコア1546

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

think49

2015/11/25 13:46

ち、力技ですね…。 やはり、click と組み合わせるしかないのでしょうか。
eripong

2015/11/25 13:57

無理矢理ですよね。。。 clickと組み合わせる方法しか思いつきません。
eripong

2015/11/26 01:58 編集

http://discourse.wicg.io/t/extend-submit-events-add-the-button-element-that-triggered-the-submit/406/3 http://stackoverflow.com/questions/2066162/how-can-i-get-the-button-that-caused-the-submit-from-the-form-submit-event でも議論されていますね。 Firefoxにはevent.originalEvent.explicitOriginalTargetというプロパティがあるらしいです。 他は、clickと連携するか、document.activeElementを使うかなど、 この場で議論されているものと大差ないように見えます。
think49

2015/11/26 13:25

Event#explicitOriginalTarget は素晴らしいですね。 非標準なので標準化される未来を望みます。 とりあえず、Event#explicitOriginalTarget の互換コードを書けば良いと思いましたが、Polyfill 的な実装にすると前方互換性が失われてしまうのでどうしたものか…。
think49

2015/12/02 12:39

- submit ハンドラ関数の event オブジェクトに event#explicitOriginalTarget の拡張を加える - submit イベント発火後に "-custom-submit" イベントを発火させて event#explicitOriginalTarget の拡張を加える いろいろ方法を考えましたが、上手い落としどころが見つかりませんでした。 他に代案もなさそうなので、一度締め切りたいと思います(将来的に希望に適うメソッド、プロパティが出てきましたら紹介頂ければ幸いです)。 今回は Firefox 独自拡張であるものの Event#explicitOriginalTarget という私の期待通りの動作になるプロパティを紹介してくれた eripong さんをベストアンサーとさせて頂きます。 http://jsfiddle.net/wz8e2enL/6/
guest

0

form の input ですよね、

input text の エンターは、submit ボタンのクリックイベントが動作します。

イベントハンドラ内で、jquery の場合は、e.target.form.ボタンの名前 とかで普通に取れます。
submit ボタンの並びがきまってるならば、e.target.form.querySelector("input[type=submit]:first") とか並びを指定すれば目的のボタンが取れます。キーダウンをエミュレートするなら、エンターじゃなくて、スペースキーですね。

投稿2015/11/25 02:38

ipadcaron

総合スコア1693

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

think49

2015/11/25 03:11

click で input[type=submit] を得られるのは認識していますが、submitイベントハンドラ関数内で完結したいのです。 clickからsubmitに渡すためには質問文の後半のコードの実装をする必要があります。 これを更にスマートにかけないでしょうか。 http://jsfiddle.net/wz8e2enL/3/ > キーダウンをエミュレートするなら、エンターじゃなくて、スペースキーですね。 少なくとも、Google Chrome 46.0.2490.86 m では input[type=submit] に focus がある状態で [Enter], [Space] キー共に submit, click イベントが作動しました。 (旧来のブラウザでは submit のみ作動すると聞いたことがありますが、具体的なブラウザ名とバージョンまでは把握しておりません) また、input[type=text] では [Enter] キーを押さないと click, submit 共に作動しませんでした。
ipadcaron

2015/11/25 10:04

2個並んでるどっちのボタンが対象なのか知りたい?ってことですか。 そんなら、htmlを上からかいて最初に現れたsubmit タイプのついた ボタンが デフォルトボタンですよ。 つまり、エンターによるサブミットは、デフォルトボタン確定。 domツリーでさいしょのボタンになるので、input[type=submit]:first がデフォルトボタンです。
think49

2015/11/25 12:44 編集

> 2個並んでるどっちのボタンが対象なのか知りたい?ってことですか。 違います。clickを使うならkeydownを使う必要がないのではと指摘はしました。 http://jsfiddle.net/wz8e2enL/3/ を実行いただけば分かるかと思います(質問文の後半にコードとリンクがあります)。 質問の主題は submit イベントハンドラ関数内で input[type=submit] を得る事です。
think49

2015/11/25 22:58

Raggさんの回答の document.activeElement を応用したコードですね。 確かに期待通りの動作ですが、keydown or click から submit までのタイミングで focus がなくなると機能しなくなるのがネックだと感じています。 少ない可能性ですが、やろうと思えば focus を外す事は可能ですので…。
guest

0

ちょっときたない方法ですが、こういう方法がありました。

javascript

1<form> 2 <input type="submit" value="submit1"> 3 <input type="submit" value="submit2"> 4</form> 5<script> 6'use strict'; 7document.querySelector('form').addEventListener('submit', function (event) { 8 // 現在フォーカスがある要素を取得(submit直後ならクリックされたボタンになっているはず) 9 var clickedButton = document.activeElement; 10 console.log(clickedButton); 11 console.log(event.type, event.target); 12 event.preventDefault(); 13}, false); 14</script>

投稿2015/11/24 10:48

編集2015/11/24 10:49
Hanakla

総合スコア29

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Hanakla

2015/11/24 11:29

input[type="text"]のEnter入力でsubmitが走った時は意図した通りに動かないです。
think49

2015/11/24 13:03 編集

回答ありがとうございます。 やはり、一筋縄ではいかないようですね。 input[type=text] の Enter にも対応させるとなると keydown と組み合わせる必要があってかなり大変そうです。 …と思いましたが、click なら検知してくれました。 http://jsfiddle.net/wz8e2enL/3/
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問