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

Question

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

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

Show us your markup and your attempt via a MVCE stackoverflow.com/help/mcve — gurvinder372
– gurvinder372, Commented Oct 27, 2017 at 9:07
we need to see the relationship between the buttons and the textboxes. Siblings parents descendants etc. — Mihai T
– Mihai T, Commented Oct 27, 2017 at 9:10
Please share your html code. Because the js function will depend on your html structure — Mario Rawady
– Mario Rawady, Commented Oct 27, 2017 at 9:15

Zakaria Acharki · Accepted Answer · 2017-10-27 09:24:41Z

4

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

edited Oct 27, 2017 at 9:24

answered Oct 27, 2017 at 9:17

Zakaria Acharki

67.5k15 gold badges79 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

James Over a year ago

Good this is what I want

Mario Rawady · Accepted Answer · 2017-10-27 09:28:46Z

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>

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related