Поместите курсор в поле ввода номера при нажатии вкладки - PullRequest
Новая
       36

Поместите курсор в поле ввода номера при нажатии вкладки

0 голосов
/ 27 июня 2019

У меня есть тип ввода HTML ниже

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.

Поскольку выбор chrome разрешен только для типа text / search, url, tel и password, а не для типа Number, selectionStart и selectionEnd не доступны. Я не могу изменить тип текстового поля на текст с номера тоже.

Каждый закомментированный код функции placeCursor является опробованным вариантом, но безуспешно при решении проблемы.

Помогите, пожалуйста, навести курсор на текстовое поле, когда вкладка нажата из текстового поля Number1 до Number2, если оно содержит только цифры.

Обновление

Получение

Uncaught RangeError: превышен максимальный размер стека вызовов

На каждом .focus (). Это проблема, которая удерживает курсор не в фокусированном текстовом поле ввода. Try-Catch игнорирует ошибку, но не помещает курсор на текстовое поле ввода. Может кто-нибудь помочь исправить это?

Ответы [ 3 ]

0 голосов
/ 27 июня 2019

Попробуйте использовать следующий код: 

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

Результат, как показано ниже (при нажатии кнопки вкладки или щелчка за пределами первого текстового поля, он будетсосредоточиться на втором текстовом поле):

enter image description here

Если все еще не работает, попробуйте создать новую страницу и протестировать приведенный выше код, если все еще не работает, возможнопроблема связана с браузером, попробуйте очистить кэш и историю браузера или сбросить настройки браузера.

0 голосов
/ 12 июля 2019

Проблема превышения размера стека вызвана глобальным тегом .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

Также используется setTimeout() на всех вызовах placeCursor () 

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

Это сработало как шарм.

0 голосов
/ 27 июня 2019 

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