按下选项卡时将光标放在输入数字框上

Question

我有以下 HTML 输入类型 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);
});
...
});

所以问题是每次按下标签时，下一个文本框都会聚焦但光标不在其中。 我必须点击它才能输入。 我不明白为什么它在 chrome 和 IE 上会这样。

由于只有文本/搜索、url、电话和密码类型才允许使用 chrome 选择，而数字类型则不允许，selectionStart 和 selectionEnd 是不可选择的。 我也无法将文本框的类型从数字更改为文本。

placeCursorfunction 上的每个注释代码都是尝试过的选项，但无法解决问题。

当标签从文本框Number1 按下到Number2 时，请帮助将光标放在文本框上，一旦它只有数字。

更新

得到

未捕获的 RangeError：超出最大调用堆栈大小

在每个 .focus() 上。这是使光标不在焦点输入文本框上的问题。 Try-Catch 会忽略错误，但不会将光标放在输入文本框上。有人可以帮忙修复它吗？

Answer 1

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

您可以尝试在插入值后调用一个函数，以便光标将聚焦在下一个文本框上。

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

Answer 2

尝试使用以下代码：

<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>

结果如下（当按下Tab键或点击第一个文本框外时，它会聚焦到第二个文本框）：

如果还是不行，尝试新建一个页面并测试上面的代码，如果还是不行，可能是浏览器的问题，尝试清除浏览器缓存和历史记录或尝试重置浏览器设置。

Answer 3

堆栈大小超出问题是由全局.focus()on input 标记引起的，该标记突出显示输入标记的标签。

深入挖掘后找到了避免堆栈大小超出问题的解决方案，并将光标放在选项卡上的输入区域。

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

添加.stopPropagation()和.cancelBubble()停止循环输入标签.focus()和placeCursor()函数的.focus()

.caretToEnd() 来自 jquery.caret.js 库

还在所有 placeCursor() 调用中使用 setTimeout()

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

这就像一个魅力。