焦點不能在可編輯表格中工作

Question

我想通過tab鍵導航，但focus（）不工作。這是bootstrap table.here是我的code.check最後兩行。當我點擊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

A TD元素不能集中。

Answer 2

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

tabindex有幾個狀態：

• tabindex="-1"使一個元素可獲得焦點，但不是通過製表鍵
• tabindex="0"使一個元素可獲得焦點，並使用使用Tab鍵時
默認順序
• tabindex="1"和更高的數字使一個元件可聚焦，製表鍵遵循tabindex編號的順序

所以在你的情況下，我會選擇tabindex="0"添加到contenteditable已啓用的元素