Does not focus on the next input.

Question

html:

<form id = "mainForm"> <div id = "div1"> <input type="text" name="input-1" id = "input1" value="" size="10px" onkeyup="testJump(this);" maxlength="5" > <input type="text" name="input-2" id = "input2" value="" size="10px" onkeyup="testJump(this);" maxlength="5" > <input type="text" name="input-3" id = "input3" value="" size="10px" onkeyup="testJump(this);" maxlength="5" > <input type="text" name="input-4" id = "input4" value="" size="10px" onkeyup="testJump(this);" maxlength="5" > <select id="listColor"> <option value="green"> Зеленый </option> <option value="red"> Красный </option> <option value="blue"> Синий </option> <option value="yellow"> Желтый </option> </select> </div> <div id = "div2"> <input type="reset" name="Очистка формы"></td> <button id = "showButton" >Отобразить данные</button> <button id = "insertButton">Вставка текстового поля</button> </div> </form>

function to automatically shift focus:

  function testJump(x){ var ml = ~~x.getAttribute('maxlength'); if(ml && x.value.length >= ml){ do{ x = x.nextSibling; } while(x && !(/text/.test(x.type))); if(x && /text/.test(x.type)){ x.focus(); } } }

the function is taken from here: How to go to the next input when filling the current one?

However, the focus does not shift

MacroG0D MacroG0D 45 five · Accepted Answer · 2016-11-16T22:41:55

The script is fully working. It only needs to be connected to the html page as follows: Copy the following line and paste between the tags and in your html document.

 <script src = "ЗДЕСЬ ПИШИ ССЫЛКУ НА СВОЙ javascript ФАЙЛ СОДЕРЖАЩИЙ КОД" type="text/javascript"></script>

StMarsh StMarsh one one · Answer 2 · 2016-11-16T22:29:40

Fixed a few bugs .. everything works. Maybe you forget to connect the script?

 <form id="mainForm"> <div id="div1"> <input type="text" name="input-1" id="input1" value="" size="10px" onkeyup="testJump(this);" maxlength="5"> <input type="text" name="input-2" id="input2" value="" size="10px" onkeyup="testJump(this);" maxlength="5"> <input type="text" name="input-3" id="input3" value="" size="10px" onkeyup="testJump(this);" maxlength="5"> <input type="text" name="input-4" id="input4" value="" size="10px" onkeyup="testJump(this);" maxlength="5"> <select id="listColor"> <option value="green">Зеленый</option> <option value="red">Красный</option> <option value="blue">Синий</option> <option value="yellow">Желтый</option> </select> </div> <div id="div2"> <input type="reset" name="Очистка формы"> <button id="showButton">Отобразить данные</button> <button id="insertButton">Вставка текстового поля</button> </div> </form>

Script:

 function testJump(x){ var ml = x.getAttribute('maxlength'); if(ml && x.value.length >= ml){ do { x = x.nextSibling; } while(x && !(/text/.test(x.type))); if(x && /text/.test(x.type)){ x.focus(); } } }

And that option works when the script is registered in the html file, when it is rendered in js in the form of one of the functions does not work
when you take it out to the script, you connect the script exactly .. how I tested it myself and everything worked: joxi.ru/E2p1kkJHBK0jJA.jpg
I connect the exact script, because when I press the buttons, they work out the functions that are in the script

Does not focus on the next input.

2 answers 2

More articles: