tabindexによるフォーカスが一瞬で消える

クリックしたDOM要素にtabindex属性を付与し、そのDOM要素にkeypressイベントを登録しようとしてます。
しかし、tabindexによるフォーカスが一瞬で消えてしまいます。
また、rabindexを付与したDOM要素をクリックしっ放しの時のみkeypressイベントが発火します。
目指す挙動は「クリックしたらkeypressイベントが発火する」挙動です。
tabindexによるフォーカスが消える原因は何でしょうか？
コードは以下の通りです

index.html

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <title>Practice</title>
6  <link rel="stylesheet" href="main.css">
7</head>
8<body>
9  <div id="first" class="gray selected" tabindex=0>こんにちは！</div>
10  <div id="second" class="gray">こんばんわ！</div>
11
12  <!--jQuery-->
13  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
14  <script type="text/javascript" src="main.js"></script>
15</body>
16</html>

main.js

JavaScript
1$('#first').on('click', (e)=>{
2    
3    // 選択中のタグを切り替える
4    $('#second').removeClass('selected');
5    $('#first').addClass('selected');
6    
7    let d = document.querySelector('[tabindex]');
8    console.log(d);
9    if (d) {
10        d.removeAttribute('tabindex');
11    };
12    
13    e.target.setAttribute("tabindex", "0");
14   
15    document.querySelector('[tabindex]').onkeypress = e => console.log("first",e.key);
16});
17
18
19$('#second').on('click', (e)=>{
20    $('#first').removeClass('selected');
21    $('#second').addClass('selected');
22    
23    let d = document.querySelector('[tabindex]');
24    console.log(d);
25    if (d) {
26        d.removeAttribute('tabindex');
27    };
28    
29    e.target.setAttribute("tabindex", "0");
30   
31    document.querySelector('[tabindex]').onkeypress = e => console.log("second",e.key);
32    
33});
34

main.css

CSS
1.gray {
2    background-color : #999;
3}
4
5.red {
6    background-color : red;
7}
8
9.blue {
10    background-color: blue;   
11}
12
13.selected {
14    border: 5px solid pink;
15}

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

回答1件

ベストアンサー

tabIndexでインデックスを渡すのはdiv要素にフォーカスできるようにするためには必要なことですが、
tabIndexを付け外しすることでフォーカスをさせることはできません。
HTMLでフォーカスさせたい要素全てにtabIndexを設定しfocus()メソッドを使ってください。

index.html

html
1・・・
2  <div id="first" class="gray selected" tabindex="0">こんにちは！</div>
3  <div id="second" class="gray" tabindex="0">こんばんわ！</div>
4・・・

main.js

javascript
1$('#first').on('click', (e)=>{
2・・・
3    $('#first').focus();
4・・・
5});
6
7$('#second').on('click', (e)=>{
8・・・
9    $('#second').focus();
10・・・
11});
12

また「クリックしたらkeypressイベントが発火する」とのことですが、
keypressイベントはキーボードを押した時にイベント発火するものなので、
上記のことを行うのは不可能だと思います。

javascriptのイベントの動作を再確認することをお勧めします。

追記
クリックしながらの要件なら離した時にkeypressイベントを削除しないと、
イベントが残り続けてキーボード押下でイベント発火し続けてしまいますね。
この場合はclickイベントを使うより、mousedownイベントでkeypressイベントを追加し、mouseupイベントで削除するのがいいかと思います。
試しのサンプルコードを載せておきます。

javascript
1$('#first').on('mousedown', (e)=>{
2    // マウスの左ボタンが押された場合
3    if(e.button == 0){
4        // 選択中のタグを切り替える
5        $('#second').removeClass('selected');
6        $('#first').addClass('selected');
7
8        $('#first').focus();
9        $('#first').on('keypress', (e)=>{
10            console.log("first",e.key)
11        });
12    }
13});
14$('#first').on('mouseup', (e)=>{
15    // マウスの左ボタンが離された場合
16    if(e.button == 0){
17        $('#first').off('keypress');
18    }
19});