CODEWITHSUNDEEP
javascriptjquery
James
James

Reputation: 311

How to change focus from one textbox to another using jQuery?

I have a web page with multiple text boxes. I have an out of control which contains buttons.on clicking button I want to change focus from one text box to another.

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

enter image description here

Fiddle : https://jsfiddle.net/anishkpn/jro626k3/

Upvotes: 0

Views: 3024

Answers (2)

Mario Rawady
Mario Rawady

Reputation: 871

The below meets your scenario:

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

Upvotes: 1

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

When you click on the button the input loose the focuse that why you should use a flag focused_index that raise the index of the last focuse input then target the next index using :

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

NOTE : Use autofocus attribute to make the first input focusable by default.

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

Upvotes: 4

Related Questions