Reputation: 39
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 placeCursor
function 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?
Upvotes: 0
Views: 2057
Reputation: 39
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.
Upvotes: -1
Reputation: 21676
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.
Upvotes: 0
Reputation: 1017
<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();
}
Upvotes: 0