按下选项卡时，将光标放在“输入数字"框中 [英] Place Cursor on Input Number box when tab is pressed

问题描述

我具有以下HTML输入类型Number

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

所以问题在于，每次按下选项卡时，下一个文本框都会被聚焦，但光标不在其中. 我必须单击它来键入. 我无法弄清为什么它在chrome和IE上的表现如此.

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.

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

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.

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

Every commented code on placeCursorfunction are tried options with no luck on fixing the issue.

当只有数字位时，从文本框Number1到Number2按下制表符时，请帮助将光标放在文本框上.

Please help place cursor on the text box when tab is pressed from text box Number1 to Number2 once it just has numerical digits.

更新

获取

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

Uncaught RangeError: Maximum call stack size exceeded

在每个.focus()上.这是使光标不在焦点输入文本框上的问题. Try-Catch会忽略该错误，但不会将光标放在输入文本框上.有人可以帮助解决此问题吗?

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?

推荐答案

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

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

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

Adding .stopPropagation() and .cancelBubble() stopped going in loop for input tag .focus() and placeCursor() function’s .focus()

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

.caretToEnd() is from jquery.caret.js library

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

Also used setTimeout() on all placeCursor() call

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

这就像一种魅力.

这篇关于按下选项卡时，将光标放在“输入数字"框中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！