JavaScriptでアクティブボタンをEnterキーで処理させたいです。

Question

現在

フォームで input の入力部分1つと キャンセルボタン　OKボタンの2ボタンがある中でエンターキーを押したらOKボタンを押す処理をしています。

やりたいこと

Tabキーでアクティブターゲットをキャンセルボタンの上に移動してエンターキーを押したらキャンセルボタンをクリックしたことにしたい。

困っていること

エンターキーを押したらOKボタンを押すというJSを書いてしまっているため、キャンセルボタンの上にカーソル（アクティブターゲット）が来ていても、エンターキーを押すと、強制的にOKボタンを押す処理のほうが走ってしまう。

コード

window.onkeydown = function(e){
  if (e.keyCode == 13) {
    OKボタンを押す処理
  }
}

知りたいこと

Pure JavaScript で エンターキーを押した場合にアクティブターゲットのボタンを優先にしたいです。
やり方をご存知のかたいらっしゃいましたらご教示いただけませんでしょうか？

Comments

[yambejp]

キャンセルボタン　OKボタンの仕様がわかりません
resetとsubmitというわけではないですよね？
キャンセルって何をするんでしょうか？

[Takumiboo]

単純にその処理を取り除けば解決だと思うのですが。

[EzrealTrueshot]

<button onclick="delete_placeholder(this.id)" type="button" class="btn btn-danger" data-dismiss="modal">Clear</button>
<button onclick="form_submit(this.id)" type="button" class="btn btn-success" data-dismiss="modal">Apply</button>

キャンセル・・・inputの入力値をまっさらにする関数を走らせる
OKボタン・・・inputの入力値をつかってごにょごにょさせる関数を走らせる

このような形をとっております！

[EzrealTrueshot]

アクティブターゲットが「キャンセルボタン」上にあるときだけ、エンターキーを押したらキャンセルボタンを押したいのです。
その他のときは、アクティブターゲットがどこにあろうとエンターキーが押されたら常にOKボタンを押したことにしたいのです。
説明がへたくそですみません。

[yambejp]

わたしの回答がそういうソースになっていると思いますがどうでしょ？

[EzrealTrueshot]

すみません、試すのに時間がかかってしまいました。
無事にできました。ありがとうございます！

Answer 1

仕様がわかりませんがとりあえずソース

<script>
window.addEventListener('DOMContentLoaded', function(e){
  [].forEach.call(document.querySelectorAll('#f1 input[type=text]'),function(x){
    x.addEventListener('keydown',function(e){
      if(e.keyCode==13){
        document.querySelector('#ok').click();
      }
    });
  });
  document.querySelector('#ok').addEventListener('click',function(e){
    console.log('ok');
  });
  document.querySelector('#cancel').addEventListener('click',function(e){
    console.log('cancel');
  });
});
</script>

<form id="f1">
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="button" value="OK" id="ok">
<input type="button" value="CANCEL" id="cancel"><br>
</form>

Comments

[EzrealTrueshot]

ありがとうございます。
無事にできました！