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

默认情况下，浏览器只会使具有交互性的元素具有焦点，如按钮，链接和输入元素。要使其他元素具有焦点，您可以使用tabindex属性。

tabindex有几个州：

tabindex="-1"使元素可以聚焦，但不能通过tab键
tabindex="0"使元素具有焦点，并在使用tab键时使用默认顺序
tabindex="1"和更高的数字使元素可以聚焦，tab键按照tabindex数字的顺序

因此，在您的情况下，我会选择将tabindex="0"添加到已启用contenteditable的元素

Answer 2

无法关注TD元素。

焦点不在可编辑的表中工作

2 个答案: