如何使用jQuery将焦点从一个文本框更改为另一个文本框？

Question

我有一个包含多个文本框的网页。我有一个失控的，其中包含buttons.on点击按钮我想将焦点从一个文本框更改为另一个文本框。

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

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

Answer 1

当你点击按钮时，输入会忽略你为什么应该使用一个标志focused_index来提高最后一个焦点输入的索引然后使用以下目标来定位下一个索引的重点：

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

注意：默认使用autofocus属性使第一个输入可对焦。

＆＃13;

＆＃13;

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

＆＃13;

<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">

＆＃13;

＆＃13;

＆＃13;

Answer 2

以下符合您的情况：

＆＃13;

＆＃13;

$(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() ;
  }
}) ;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;