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上的表现如此。

由于仅允许使用text / search，url，tel和password类型而不是使用Number类型进行chrome选择，因此selectionStart和selectionEnd不可选项。我也无法将文本框的类型也从数字更改为文本。

在placeCursor函数上使用的所有注释代码都是经过尝试的选项，无法解决问题。

当只有数字位的文本从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键或在第一个文本框外单击时，它将集中在第二个文本框上）：

如果仍然无法正常运行，请尝试创建一个新页面并测试上面的代码，如果仍然不能正常运行，则可能是与浏览器有关，请尝试清除浏览器的缓存和历史记录，或者尝试重置浏览器设置。 / p>

Answer 3

超出堆栈大小的问题是由.focus()标签上的全局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);

这就像一种魅力。

按下Tab键时，将光标放在“输入数字”框中

3 个答案: