焦點在可編輯表中不起作用

Question

我想通過Tab鍵導航，但是focus（）不起作用。這是引導表。這是我的代碼。請檢查最后兩行。當我單擊n個單元格並再次導航時。

表格代碼：

        <table class="table table-bordered" id="tab1">
        <thead class="mbhead">
           <tr class="mbrow">
              <th></th>
              <th>A</th>
              <th>B</th>
              <th>C</th>
              <th>D</th>
              <th>E</th>
              <th>F</th>
              <th>G</th>
              <th>H</th>
              <th>I</th>
              <th>J</th>
              </tr>
       </thead>
       <tbody>
        <tr>
         <td>1</td>
         <td>asd</td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td>ddd</td>
         <td></td>
         <td></td>
         <td></td>
      </tr>
       <tr>
        <td>2</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
     </body>
    </table>

編輯代碼：

        function init(){

       $("#tab1 tr td:not(:first-child)").on("click", function (e) {
           console.log(e);
             mytd=$(this);//mytd is defined here
            if(e.currentTarget.contentEditable != null){
                 $(e.currentTarget).attr("contentEditable",true);
             }
            else{
                  $(e.currentTarget).append("<input type='text'>");
             }
          }); 

          $(this).keydown(function (event) {

             if (event.keyCode == 9){                       // tab key for navigation
                       event.preventDefault();
                       $(mytd).next('td').html("abcd");//working
                       $(mytd).next('td').focus();//cursor is not moving
                       return false;
                }
            }      
          }

感謝名單。

Answer 1

默認情況下，瀏覽器僅使交互式的元素（例如按鈕，鏈接和輸入元素）可聚焦。 要使其他元素可聚焦，可以使用tabindex屬性。

tabindex有兩個狀態：

• tabindex="-1"使元素具有焦點，但不能通過Tab鍵
• tabindex="0"使元素可聚焦，並在使用Tab鍵時使用默認順序
• tabindex="1"和更高的數字可以使元素成為焦點，tab鍵遵循tabindex編號的順序

因此，在您的情況下，我將選擇添加tabindex="0"到啟用contenteditable的元素

Answer 2

TD元素無法聚焦。