Question

按下 Tab 键时将光标置于输入数字框上

2019-06-27

1997

javascript jquery html google-chrome internet-explorer-9

我有以下 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、tel 和 password，而不允许使用类型 Number，因此 selectionStart 和 selectionEnd 不在选项中。我也无法将文本框的类型从数字更改为文本。

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

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

更新

获取

Uncaught RangeError: Maximum call stack size exceeded

在每个 .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

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

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

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

这非常有效。