Сосредоточьтесь на следующий элемент, нажав на кнопку

Question

Моя цель перемещения фокуса на следующий элемент ввода, когда кнопка срабатывает mouseup событие, вот сценарий:

var cleared = false; 
$(document).ready(function(){ 

    //focus on first element 
    var focused = null; 
    $(".inp").focus(function() { 
     focused = $(this); 
    }).first().focus(); 

    //when mousedown, set value 4 
    $("#btn").mousedown(function(e) { 
     focused.val("4"); 
    }).mouseup(function(e) { 

     //when mouseup, change bg color 
     focused.css("background-color","yellow"); 

     //and focus on next element 
     if (focused && focused.length) { 
      focused.next(".inp").focus(); 
     }  
    }); 
}); 

Вот мой HTML элемент:

<table>  
     <tr> 
      <td>ABC</td> 
      <td><input class="inp"/></td> 
      <td><input class="inp"/></td> 
      <td><input class="inp"/></td> 
     </tr> 
    </table> 
<button id="btn">4</button>Good 

Моя проблема заключается в том, что фокус никогда не устанавливает следующий, как я могу это решить?

Answer 1

Working fiddle

next(): Получить сразу после SIBL каждого элемента в наборе согласованных элементов. Если предусмотрен селектор, он получает следующий брат, только если он соответствует этому селектору. не

Вы не «сразу после собрата» с классом inp, поэтому вы должны двигаться вверх один раз к родителю td, а затем перейти к следующему тд, используя next() Funtion, а затем найти в этом тд класс inp и выполните фокус.

Просто замените:

focused.next(".inp").focus(); 

By:

focused.parent().next().find(".inp").focus(); 

Полного JS:

var cleared = false; 
$(document).ready(function(){ 

    //focus on first element 
    var focused = null; 
    $(".inp").focus(function() { 
     focused = $(this); 
    }).first().focus(); 

    //when mousedown, set value 4 
    $("#btn").mousedown(function(e) { 
     focused.val("4"); 
    }).mouseup(function(e) { 

     //when mouseup, change bg color 
     focused.css("background-color","yellow"); 

     //and focus on next element 
     if (focused && focused.length) { 
      focused.parent().next().find(".inp").focus(); 
     }  
    }); 
}); 

Надеется, что это помогает.

Answer 2

попробовать это, чтобы сосредоточиться на следующем элементе

$(this).trigger("keydown", [9]); 

заменяющего следующее в вашем коде

if (focused && focused.length) { 
     focused.next(".inp").focus(); 
    }