Place Cursor on Input Number box when tab is pressed

Question

I have the below HTML input type Number

HTML:

<input type=“number” class=“reqField” id=“number1” placeholder=“Enter Number only/>
<input type=“number” class=“reqField” id=“number2” placeholder=“Enter Number only/>

JS:

function focusInNumber (id) {
var thisID = id;
var nextID = id + 1;
var preID = id - 1;
clearTimeout(numberReturn);
$(“#number” + thisID).prop(“disabled”, false);
placeCursor($(“#number” + thisID));
}
function focusOutNumber (id) {
var thisID = id;
var nextID = id + 1;
var preID = id - 1;
var value = $(“#number” + thisID).val();
var regex = new RegExp(/^\d*$/);
var regex1 = new RegExp(/^.*[\+\-\.].*/);
var l = $(“#number” + thisID).val().length;
if(value.match(regex3)) {
alert(“Just enter numerical digits”);
numberReturn = setTimeout(function() {
placeCursor($(“#number” + thisID));
},5000);
} else {
if (l<=0) {
alert(“This field cannot be empty”);
placeCursor($(“#number” + thisID));
},5000);
} else {
if(value.match(regex)) {
placeCursor($(“#number” + nextID));
}
}
}
function placeCursor(id) {
id.focus();
//id.val(id.val());
var tmp= id.val();
id.val(“”);
id.va(tmp);
//id.focus().val(“”).blur().focus().val(tmp);
}

$(document).ready(function(){
....
$(“#number1”).focusin(function(){
focusInNumber(1);
});
$(“#number1”).focusout(function(){
focusOutNumber(1);
});
...
});

So the problem is that every time tab is pressed, the next text box is focused but the cursor is not in it. I have to click on it to type. I can’t figure out why it’s behaving like this on chrome and IE.

As chrome selection is only permitted with type text/search, url, tel, and password and not on type Number, selectionStart and selectionEnd is out of option. I cannot change the type of the text box to text from number too.

Every commented code on placeCursorfunction are tried options with no luck on fixing the issue.

Please help place cursor on the text box when tab is pressed from text box Number1 to Number2 once it just has numerical digits.

Update

Getting

Uncaught RangeError: Maximum call stack size exceeded

On every .focus(). This is the problem which keeps the cursor not on the focused input text box. Try-Catch ignores the error, but does not places the cursor on the input textbox.Can someone help fix it?

Answer 1

<input type=“number” class=“reqField” id=“number1” placeholder=“Enter Number only/>
<input type=“number” class=“reqField” id=“number2” placeholder=“Enter Number only/>

You can try calling a function after you insert the value so that the cursor will focus on the next textbox.

function setFocus() {
    document.getElementById("myTextbox").focus();
}

Answer 2

Try to use the following code:

<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script type="text/javascript">
    var numberReturn = 0;
    function focusInNumber(id) {
        var thisID = id;
        var nextID = id + 1;
        var preID = id - 1;
        $("#number" + thisID).prop("disabled", false);
    }
    function focusOutNumber(id) {
        var thisID = id;
        var nextID = id + 1;
        var preID = id - 1;
        var value = $("#number" + thisID).val();
        var regex = new RegExp(/^\d*$/);
        var regex1 = new RegExp(/^.*[\+\-\.].*/);
        var l = $("#number" + thisID).val().length;
        if (!value.match(regex)) {
            alert("Just enter numerical digits");
            $("#number" + thisID).val("");
            placeCursor($("#number" + thisID));
        } else {
            if (l <= 0) {
                alert("This field cannot be empty");
                placeCursor($("#number" + thisID));
            } else {
                if (value.match(regex)) {
                    console.log(nextID);
                    placeCursor($("#number" + nextID));
                    console.log("validate success");
                }
            }
        }
    }
    function placeCursor(id) {
        console.log(id);
        //$(id).focus();
        id.focus();
        var tmp = id.val();
        id.val("");
        id.val(tmp);
    }
    $(document).ready(function () {
        $("#number1").focusin(function () {
            focusInNumber(1);
        });
        $("#number1").focusout(function () {
            focusOutNumber(1);
        });
    });
</script>

The result as below (when press the tab button or click outside the first textbox, it will focus on the second textbox):

If still not working, try to create a new page and test above code, if still not working, perhaps the issue is related to the Browser, try to clear the browser cache and history or try to reset the browser setting.

Answer 3

The stack size exceeded issue is caused by a global .focus()on input tag, that highlights the label of the input tag.

After deep digging found a solution to avoid the stack size exceeded issue and place cursor on the input area on tab.

Function placeCursor(id) {
 id.focus(function(e) {
  e.stopPropagation();
  e.cancelBubble();
  id.caretToEnd();
  });
  id.focus();
}

Adding .stopPropagation() and .cancelBubble() stopped going in loop for input tag .focus() and placeCursor() function’s .focus()

.caretToEnd() is from jquery.caret.js library

Also used setTimeout() on all placeCursor() call

var q1 = setTimeout(function() {
 placeCursor($(“#number” + thisID));
},100);

This worked like a charm.