1

我想通过 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;
                }
            }      
          }

谢谢。

4

2 回答 2

1

In default, browser only make the elements focusable that are interactive, like buttons, links and input elements. To make other elements focusable you can use the tabindex attribute.

tabindex has a couple states:

  • tabindex="-1" makes an element focusable, but not through the tab-key
  • tabindex="0" makes an element focusable, and uses the default order when using the tab-key
  • tabindex="1" and higher numbers makes an element focusable, the tab-key follows the order of the tabindex numbers

So in your case, I would choose to add tabindex="0" to the elements that have contenteditable enabled

于 2013-03-11T11:24:58.313 回答
0

A TD element can't be focused.

于 2013-03-11T11:24:04.760 回答