如何使用jQuery將焦點從一個文本框更改為另一個文本框？

Question

我有一個帶有多個文本框的網頁。 我無法控制其中包含的按鈕。單擊按鈕時，我想將焦點從一個文本框更改為另一個文本框。

$(document).ready(function () {
  $("#nextInput").click(function () {           
    $(this).next('.textboxfield').focus();
  });
});

小提琴： https : //jsfiddle.net/anishkpn/jro626k3/

Answer 1

當您單擊按鈕時，輸入會失去focused_index ，為什么您應該使用標志focused_index來提高上一個focused_index輸入的索引，然后使用下一個目標來定位：

$('.textboxfield').eq(focused_index+1).focus();

注意：使用autofocus屬性可以使第一個輸入默認為可autofocus 。

 $(document).ready(function() { var focused_index = 0; $("#nextInput").click(function() { $('.textboxfield').eq(focused_index+1).focus(); }); $(".textboxfield").focus(function() { focused_index = $(".textboxfield").index($(this)); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="col-md-6 col-sm-6" style="padding-top: 25px; font-weight: bold;" id="outOffDiv"> <a href="#" class="outoff previous round" id="previousInput">‹</a> <span id="currentField">1</span> out of <span id="totalFileds">16</span> <a href="#" class="outoff next round" id="nextInput">›</a> </div> <br/> <input class="textboxfield" id="name" name="name" placeholder="Name" tabindex="1" value="" type="text" autofocus> <br/> <input class="textboxfield" id="age" name="age" placeholder="Age" tabindex="2" value="" type="text"> <br/> <input class="textboxfield" id="address" name="address" placeholder="Address" tabindex="3" value="" type="text"> <br/> <input class="textboxfield" id="state" name="state" placeholder="State" tabindex="4" value="" type="text"> 

Answer 2

以下滿足您的情況：

 $(document).ready(function() { //By Default Set the first input to be focused $("#step").html("1") ; $("input#text1").addClass("focused").focus() ; }) ; $("#next").on("click", function() { //When Next is clicked if ($("input.focused").parents(".bloc").next(".bloc").length > 0) { //If it is not the last, focus the next $("input.focused").removeClass("focused").parents(".bloc").next(".bloc").find("input").addClass("focused").focus() ; var step = parseInt($("#step").text()) ; $("#step").html(step + 1) ; } else { //If it is the last, focus the first $("#step").html("1") ; $("input#text1").addClass("focused").focus() ; } }) ; $("#prev").on("click", function() { //When Prev is clicked if ($("input.focused").parents(".bloc").prev(".bloc").length > 0) { //If it is not the first, focus the prev $("input.focused").removeClass("focused").parents(".bloc").prev(".bloc").find("input").addClass("focused").focus() ; var step = parseInt($("#step").text()) ; $("#step").html(step - 1) ; } else { //If it is the first, focus the last var nbOfBlocs = $(".bloc").length ; $("#step").html(nbOfBlocs) ; $("input#text" + nbOfBlocs).addClass("focused").focus() ; } }) ; 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="javascript:;" id="prev">Prev</a> <span id="step"></span> <a href="javascript:;" id="next">Next</a> <div class="bloc"> <label for="text1">Text 1</label> <input type="text" id="text1" /> </div> <div class="bloc"> <label for="text2">Text 2</label> <input type="text" id="text2" /> </div> <div class="bloc"> <label for="text3">Text 3</label> <input type="text" id="text3" /> </div> <div class="bloc"> <label for="text4">Text 4</label> <input type="text" id="text4" /> </div> <div class="bloc"> <label for="text5">Text 5</label> <input type="text" id="text5" /> </div>