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

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);
});
...
});

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

因为 chrome 选择只允许使用类型 text/search、url、电话和密码，而不是类型 Number、selectionStart 和 selectionEnd是不可能的。我也无法将文本框的类型从数字更改为文本。

placeCursor函数上的每个评论代码都是尝试过的选项，但没有运气解决问题。

当文本框 Number1 到 Number2 只有数字时按 Tab 键时，请帮助将光标放在文本框上。

更新

获得

Uncaught RangeError: Maximum call stack size exceeded

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

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() is from jquery.caret.js library

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

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

这很有效。

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

Place Cursor on Input Number box when tab is pressed

html

javascript

jquery

google-chrome

internet-explorer-9