前回のご質問にさらにという形になるのですが、下記のようなtabindexを設定した
擬似的なdivのbutton要素について、focus状態になっている時に、enterキーを操作することで
ボタンを実行することは可能なのでしょうか？

イベンドで.focusとkeypress(keycode=13)を同時に設定することが
できるかを調べても見つけることができなかったため、ご質問をさせていただきました。

よろしくお願いもうし上げます。

html
1 <div tabindex="0">
2   button
3 </div>

行動規範の内容に同意します

回答1件

ベストアンサー

調査方法

html
1<!DOCTYPE HTML>
2<html lang="ja">
3	<head>
4		<meta charset="UTF-8">
5		<title></title>
6	</head>
7	<body>
8		<div id="sample" tabindex="0">
9			button
10		</div>
11		<script type="text/javascript">
12			var div = document.getElementById('sample');
13			console.log(div);
14		</script>
15	</body>
16</html>

このような最小限のファイルを作成し、Chromeのデベロッパーツールを開きます。
「Element」を選択し、div を選択。
「Properties」を選択すると、選択したdivが持つプロパティが表示される。
「HTMLElememt」を展開すると、要素が持っているイベントが出てきます。
この中に、「Keyup」「Keypress」などがあります。

html
1<!DOCTYPE HTML>
2<html lang="ja">
3	<head>
4		<meta charset="UTF-8">
5		<title></title>
6	</head>
7	<body>
8		<div id="sample" tabindex="0">
9			button
10		</div>
11		<script type="text/javascript">
12			var div = document.getElementById('sample');
13			console.log(div);
14
15			div.addEventListener('keyup', function (e) {
16				console.log(e);
17			});
18		</script>
19	</body>
20</html>

HTMLに上記のように追記し、keyup の動きを調べます。

ページを開き、div にフォーカスがないときに、Enterを押してみると、console.log(e); が反応しないことが確認できます。

次に、div にフォーカスがあるときに、Enterを押してみると、

反応しました。

フォーカスがあるときしか、keyupは反応しないので、基本路線はこれで良いと言うことがわかる。

ではEnterキーのキーコード「13」をどうやってとるのか。

「KeyboardEvent」を展開すると、「keyCode: 13」と言う表記があるので、
以下のようにHTMLを編集すれば良いと言うことがわかります。

html
1<!DOCTYPE HTML>
2<html lang="ja">
3	<head>
4		<meta charset="UTF-8">
5		<title></title>
6	</head>
7	<body>
8		<div id="sample" tabindex="0">
9			button
10		</div>
11		<script type="text/javascript">
12			var div = document.getElementById('sample');
13			console.log(div);
14
15			div.addEventListener('keyup', function (e) {
16				console.log(e.keyCode);
17			});
18		</script>
19	</body>
20</html>

投稿2018/07/17 21:16

編集2018/07/17 21:18

退会済みユーザー

総合スコア0

SugiuraY

2018/07/17 22:59

Kosuke_Shibuya様おはようございます。思考のプロセスまで詳細にご教示いただきありがとうございます。フォーカス状態にあるときにkeyupイベントを拾ってくれることを確認でき、keyCode==13の時に処理を実行することで、無事解決することができました。そして、何よりもご教示いただいたような方法でデベロッパーツールを使いながら、一つずつ動作や状態を確認していくことの重要性を改めて学ぶことができました。お恥ずかしながらdiv要素にもkey関係のプロパティが備わっていることを初めて知ったのですが、このような調べ方で一目瞭然ですね。自分でも調べる力に対する大きなヒントをいただきました。心より、ご解説に感謝を申し上げます。

行動規範の内容に同意します