✏️2021/12/11
【JavaScript】クリックイベントと等価なEnterキーイベントを追加する
ユーザーがボタンをクリックした時に起こることがEnterキーが押された時にも起こるようにします．
このサイトの大都市近郊区間大回りのページ(例えば，東京近郊区間のページ)に実装されているようなものです．
例えば，次のようなbuttonがあるとします．このボタンをクリック or Enterキーを押した時に/main.jsにある関数が発火することが目標です．
<body>
...
<button type="button">検索</button>
...
<script src="/main.js"></script>
</body>これを実現するためにはmain.jsを次のようにします．ここで，発火させたい関数をfunc1とします．
let btn = document.querySelector("button");
document.body.addEventListener("keydown", (e) => {
if (e.key == "Enter") {
return func1();
}
});
btn.addEventListener("click", () => {
return func1();
});
var func1 = function() {
//実現したい処理を書く
//例えば↓
console.log("Hello World")
const word = document.getElementById('input-word');
・・・
}デモ
以下にデモページの全コードを示します．検索窓に単語を入れてから検索ボタンをクリックするかEnterキーを押すと， 入力した単語＋"の検索結果は以下の通りです．" を出力します．何も入力されていない状態で呼び出されると "何も入力されていないです．" を出力します．
index.htmlは次の通りです．
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta word="viewport" content="width=device-width, initial-scale=1.0">
<title>クリックエンターデモ</title>
</head>
<body>
<input type="text" id="input-word">
<button type="button">検索</button>
<p id="result"></p>
<script src="./main.js"></script>
</body>
</html>main.js は次の通りです．
let btn = document.querySelector("button");
document.body.addEventListener("keydown", (e) => {
if (e.key == "Enter") {
return func1();
}
});
btn.addEventListener("click", () => {
return func1();
});
var func1 = function() {
const word = document.getElementById('input-word');
var resultText;
if(word.value.trim().length){
resultText = word.value + "の検索結果は以下の通りです．";
} else {
resultText = "何も入力されていないです．";
};
let result = document.getElementById('result');
result.innerHTML = resultText;
}
上記コードをコピペして試してみてください．
次の記事を参考にしました． How to Press Enter Key Programmatically in JavaScript