CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Marko Petković
Marko Petković

Reputation: 185

Input focus change

I tried to make crossword like quiz, and need to change focus on input when input is field with letter. The problem is that I can change focus on fields that are in same div

$(".inputs").keyup(function () {
    $(this).next().focus();
});

or between two divs

$(':input').keyup(function (e) {
    if ($(this).val().length == $(this).attr('maxlength')) {
        $(this).closest('div').next().find(':input').first().focus();
    }
})

but I do not know how to change focus on next input nevermind if it is in the same div or it is in another div.

<div class="answer_1">
    <input class="inputs letter square border_orange" maxlength="1"  type="text" />
    <input class="inputs letter square border_orange" maxlength="1" type="text" />
</div>
<div class="answer_2">
    <input class="inputs letter square border_orange" maxlength="1"  type="text" />
    <input class="inputs letter square border_orange" maxlength="1" type="text" />
</div>

Html code is above, I tried to change input focus first inside inputs in answer_1 div, and when I finish with second input here, to automaticly change focus on input in next div. Any suggestion?

Upvotes: 2

Views: 5384

Answers (5)

Gerard
Gerard

Reputation: 15786

You can use the below

$(".inputs").keyup(function () {
    if ( $(this).next().is("input") ) {
      alert("next child");
    } else {
      alert("next div");
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="answer_1">
    <input class="inputs letter square border_orange" maxlength="1"  type="text" />
    <input class="inputs letter square border_orange" maxlength="1" type="text" />
</div>
<div class="answer_2">
    <input class="inputs letter square border_orange" maxlength="1"  type="text" />
    <input class="inputs letter square border_orange" maxlength="1" type="text" />
</div>

Upvotes: 0

Arash Khajelou
Arash Khajelou

Reputation: 570

you can try something like this : solve this with setting index value to your inputs :)

$(".inputs").keyup(function () {
    var thisEl = jQuery(this);
    var index = parseInt(thisEl.data('index'));
    if ($(this).val().length == $(this).attr('maxlength')) {
        index++;
        jQuery('.inputs[data-index="'+index+'"]').focus();
    }
});
<div class="answer_1">
    <input data-index="1" class="inputs letter square border_orange" maxlength="1"  type="text" />
    <input data-index="2" class="inputs letter square border_orange" maxlength="1" type="text" />
</div>
<div class="answer_2">
    <input data-index="3" class="inputs letter square border_orange" maxlength="1"  type="text" />
    <input data-index="4" class="inputs letter square border_orange" maxlength="1" type="text" />
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Upvotes: 0

Ori Drori
Ori Drori

Reputation: 191916

You can use a collection of inputs, and traverse it using the index of the clicked element:

var $inputs = $(".inputs"); // get the collection of inputs

$inputs.keyup(function () {
  var index = $inputs.index(this); // get the index of the current input
  
  $inputs.eq(index + 1).focus(); // focus the next input
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="answer_1">
  <input class="inputs letter square border_orange" maxlength="1" type="text" />
  <input class="inputs letter square border_orange" maxlength="1" type="text" />

</div>
<div class="answer_2">
  <input class="inputs letter square border_orange" maxlength="1" type="text" />
  <input class="inputs letter square border_orange" maxlength="1" type="text" />

</div>

Upvotes: 3

Taleeb
Taleeb

Reputation: 1909

Code can be written to see if there is any control in the same div. For example the following code can be used.

$(".inputs").keyup(function() {
  if ($(this).val().length == $(this).attr('maxlength')) {
    if ($(this).next().length) {
      $(this).next().focus();
    } else {
      $(this).closest('div').next().find(':input').first().focus();
    }
  }
});

See jsFiddle here.

Upvotes: 0

Milan Chheda
Milan Chheda

Reputation: 8249

I am assuming you will have a form, since you have input fields.

$("input").keyup(function() {
  var inputs = $(this).closest('form').find(':input');
  inputs.eq(inputs.index(this) + 1).focus();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <div class="answer_1">
    <input class="inputs letter square border_orange" maxlength="1" type="text" />
    <input class="inputs letter square border_orange" maxlength="1" type="text" />

  </div>
  <div class="answer_2">
    <input class="inputs letter square border_orange" maxlength="1" type="text" />
    <input class="inputs letter square border_orange" maxlength="1" type="text" />

  </div>
</form>

Upvotes: 1

Related Questions