能夠集中，但不能在使用jQuery的輸入框中鍵入

Question

基本上我有一系列5行文本框（每行包含3列）和單個文本區域...在列3結尾的選項卡應將其帶到文本區域，然後從文本區域切換應該帶我到下一行輸入/文本框。

下面的代碼工作到通過row1 tabing的範圍，從row1 col3到textarea_desc，然後在textarea_desc tabb上移動焦點到row2 col1但是我看不到光標出現在row2 col1 ...如果我添加css它在第2行col1 hsows了，但沒有光標，所以我不能輸入文本我必須點擊row2 col1的光標出現可以有人告訴我爲什麼？

$('input[type="text"],textarea').on('focusout', function() { 
     var box_class=$(this).attr("class"); 
     var row_id=$(this).parents('ul').attr('id');  


     if (box_class.indexOf("col3")>=0) { 
      $("#textarea_desc").focus(); 
      $("#prev_row").val(row_id); 
     } 
     if (box_class.indexOf("textarea_desc")>=0) { 
      var prev_row=$("#prev_row").val(); 

      var new_row=$("#prev_row").val().match(/\d+/); 
      new_row="#row"+(parseInt(new_row)+1)+"-col1"; 


      $(new_row).focus(); 


     } 

    }); 

HTML ....

<ul id="row1" class="row"> 
        <li class="col1" >1.</li> 
        <li class="col2"><input type="text" size="26" class="row1-col1" id="row1-col1" /></li> 
        <li class="col3"><textarea cols="28" rows="1" class="row1-col2 textareainp" id="row1-col2" ></textarea></li> 
        <li class="col4"><input type="text" size="10" class="row1-col3 " id="row1-col3" /></li> 
       </ul><ul id="row2" class="row"> 
        <li class="col1" >2.</li> 
        <li class="col2"><input type="text" size="26" class="row2-col1" id="row2-col1" /></li> 
        <li class="col3"><textarea cols="28" rows="1" class="row2-col2 textareainp" id="row2-col2" ></textarea></li> 
        <li class="col4"><input type="text" size="10" class="row2-col3 " id="row2-col3" /></li> 
       </ul> 
<textarea cols="40" rows="7" class="textarea_desc" id="textarea_desc" ></textarea> 
<input type="hidden" id="prev_row" class="prev_row" value="" /> 

Answer 1

這是因爲focusout是因爲TAB的發生和TAB事件會自動把焦點的下一個元素。你需要抓住TAB鍵，然後使用這樣的事：

$("*:focus") 

這會給你目前的焦點元素。在你的功能中使用這個。

此外，您還需要調用此：

event.preventDefault() 

工作代碼：

$(document).on("keydown", function(event) { 
    switch (event.keyCode) { 
     case 9: // TAB 
      event.preventDefault(); // Stop from changing focus 

      $this = $("*:focus"); 

      var box_class=$this.attr("class"); 
      var row_id=$this.parents('ul').attr('id');  

      if (box_class.indexOf("col3")>=0) { 
       $("#textarea_desc").focus(); 
       $("#prev_row").val(row_id); 
      } 
      if (box_class.indexOf("textarea_desc")>=0) { 
       var prev_row=$("#prev_row").val(); 

       var new_row=$("#prev_row").val().match(/\d+/); 
       new_row="#row"+(parseInt(new_row)+1)+"-col1"; 


       $(new_row).focus(); 
      } 
      break; 
    } 
});