focus function working in console but in through the code

Question

I am trying to create a webpage which allows you to enter an IP address(IPv4). I want that whenever user has added 3 numbers in the textbox the focus should automatically be transferred to the next textbox. For that I have given onkeypress event to the textbox and called a JS function and sent an argument to it. Have a look at my code.

<input onkeypress="check(this)" type="text" 
id="<?php if($i==1){echo "5";} else {echo "1";} ?>"
class="form-control" placeholder="First Octate"/>

Here is the check function

function check(element){
    if(element.value.length==2){
        newId= parseInt(element.id) + 1
        document.getElementById(newId.toString()).focus()
    }
}

Now if I log the document.getElementById(newId.toString()) to the console, it is giving me a valid element and if I use focus method with the logged element I am actually able to change the focus. What I can't understand is it is not doing the same thing if done using this function. I am not able to change the focus according to the condition

Answer 1

Problem with your code is the focus is not moving because of the action it takes. You need to add a slight delay

 function check(element) { if (element.value.length == 2) { var newId = parseInt(element.id) + 1 setTimeout(()=>document.getElementById(newId.toString()).focus(),1); } }

 <input onkeypress="check(this)" type="text" id="1" /> <input onkeypress="check(this)" type="text" id="2" /> <input type="text" id="3" />

You would be better off with keyup event

 function check(element) { if (element.value.length == 3) { var newId = parseInt(element.id) + 1 document.getElementById(newId.toString()).focus(); } }

 <input onkeyup="check(this)" type="text" id="1" /> <input onkeyup="check(this)" type="text" id="2" /> <input type="text" id="3" />

Now this code is fine if they are typing, if they paste in a value, you have a whole new problem to solve.

Answer 2

Try adding a setTimeout command to your code:

 function check(element){ if(element.value.length==2){ newId= parseInt(element.id) + 1 setTimeout(function() { document.getElementById(newId.toString()).focus() }); } }

 <input onkeydown="check(this)" type="text" id="1" class="form-control" placeholder="First octet"/> <input onkeydown="check(this)" type="text" id="2" class="form-control" placeholder="Second octet"/> <input onkeydown="check(this)" type="text" id="3" class="form-control" placeholder="Third octet"/> <input onkeydown="check(this)" type="text" id="4" class="form-control" placeholder="Fourth octet"/>

Key events seem to refocus their targets' inputs after they have been fired. This tries to resolve that by waiting until the event has finished being fired, from which it will then focus the next input.

Also, I suggest you use keydown instead of keypress — the latter is deprecated .

Answer 3

You can set your events up in a window.load script and use data-attributes to inform your input listener on how many numbers to listen for. Also, if you use type='number' you can ensure you'll get numbers

 window.addEventListener('DOMContentLoaded', () => { let q = document.querySelectorAll('.autofoc'); q.forEach(el => { el.addEventListener('input', e => { let l = +e.target.dataset.len if (e.target.value.length >= l) { e.target.value = e.target.value.slice(0, l) e.target.nextElementSibling.focus() } }) }) })

 <input type="number" data-len='3' class="form-control autofoc" placeholder="Area code" /> <input type="number" data-len='3' class="form-control autofoc" placeholder="First 3" /> <input type="number" data-len='4' class="form-control autofoc" placeholder="Last 4" />