Вопрос по jquery – сосредоточив внимание на следующем входе (JQuery)

19

У меня есть четыре входа, каждый из которых принимает одно число. То, что я хочу сделать, это автоматически установить фокус на следующий вход после того, как номер был установлен. Все они имеют класс «входы».

Это не совсем работает:

<code>$(".inputs").keydown(function () {

            $(this).next().focus();
        });
</code>
Смотрите этот пост [1]:stackoverflow.com/questions/1232379/… BinBin
Увидетьupdated post для некоторых новых функций .. больше похожеautotab DEMO Selvakumar Arumugam

Ваш Ответ

10   ответов
0

Если вы просто хотите посмотреть на следующий ввод, но вы должны сказать разделители таким образом

<input type="number" pattern="[0-9]*" inputmode="numeric" maxlength="2" placeholder="DD" name="dobday" id="dobday">
<div class="separator">/</div>
<input type="number" pattern="[0-9]*" inputmode="numeric" maxlength="2" placeholder="MM" name="dobmonth" id="dobmonth">
<div class="separator">/</div>
<input type="number" pattern="[0-9]*" inputmode="numeric" maxlength="4" placeholder="YYYY" name="dobyear" id="dobyear">

Вам понадобится этот код, чтобы получить все следующие элементы и рассчитать первый найденный вход:

$('input#dobday,input#dobmonth,input#dobyear').on('input', function(e) {
    if (jQuery(this).val().length >= parseInt(jQuery(this).attr("maxlength"), 10)) {
            if (jQuery(this).attr('id') === 'dobyear') {
                jQuery(this).blur();
            } else {
                jQuery(this).nextAll('input:first').focus();
            }
    }
}
1

После поиска и разработки я получаю фрагмент кода, который позволяет сфокусировать следующее поле ввода с тем же классом в зависимости от максимальной длины (протестировано с 1 символом), а также с возможностью возврата назад с помощью кнопки возврата назад:

Javascript (JQuery):

var codeCharInput = 'input.code-char';
$(codeCharInput+':first').focus();
$(codeCharInput).keyup(function(e) {
  if ((e.which == 8 || e.which == 46)) {
    $(this).prev(codeCharInput).focus().val($(this).prev().val());
  } else {
    if (this.value.length == this.maxLength) {
      $(this).next(codeCharInput).focus();
    }
  }
});

HTML:

<input type="text" name="chars[]" maxlength="1" class="code-char" />
<input type="text" name="chars[]" maxlength="1" class="code-char" />
<input type="text" name="chars[]" maxlength="1" class="code-char" />
<input type="text" name="chars[]" maxlength="1" class="code-char" />
1

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

1) по существу:

tabables = $("*[tabindex != '-1']:visible");
var index = tabables.index(element);
tabables.eq(index + 1).focus();

2) Вот вы и есть «класс» это инкапсулирует поведение, имея в виду прямые и обратные и действительные фокусируемые элементы.

Я надеюсь, что это поможет, и если какой-то код соответствует вашим потребностям, не стесняйтесь адаптироваться к вашим потребностям :)

EnterAsTab = function () {
    this.ENTER_KEY = 13;
};

EnterAsTab.prototype.init = function () {
    this.listenOnEnterKey();
};

EnterAsTab.prototype.listenOnEnterKey = function () {

    var me = this;
    $('form input').on('keypress', function (event) {

            if (event.which === me.ENTER_KEY) {

                if (!event.shiftKey)
                    me.findNextFocusableElement(this);
                else
                    me.findPreviousFocusableElement(this);

                event.preventDefault();
            }
        }
    );
};

EnterAsTab.prototype.findNextFocusableElement = function (element) {
    this.findFocusableElement(element, this.increaseIndex);
};

EnterAsTab.prototype.findPreviousFocusableElement = function (element) {
    this.findFocusableElement(element, this.decreaseIndex);
};

EnterAsTab.prototype.findFocusableElement = function (element, callable) {

    var tabables = $("*[tabindex != '-1']:visible");
    var index = tabables.index(element);
    var counter = 1;
    var nextElement = undefined;

    try {

        while (true) {

            if ((nextElement = tabables.eq(index + counter)).length === 0) {
                break;
            }

            if (this.isFocusableElement(nextElement)) {

                var newIndex = callable.call(this, index, counter);
                tabables.eq(newIndex).focus();

                break;
            } else {
                counter++;
            }
        }
    } catch (error) {
        console.log(error);
    }

};

EnterAsTab.prototype.increaseIndex = function (index, counter) {
    return (index + counter);
};

EnterAsTab.prototype.decreaseIndex = function (index, counter) {
    return index - counter;
};

EnterAsTab.prototype.isFocusableElement = function (element) {

    return ['SELECT', 'TEXTAREA'].indexOf(element.prop('tagName')) > -1 ||
        element.is(':text') ||
        element.is(':checkbox') ||
        element.is(':radio');
};

var enterAsTab = new EnterAsTab();
enterAsTab.init();
4

Это просто получит следующий элемент, каким бы он ни был. Вы, вероятно, хотите:

$(".inputs").keyup(function () {
  $(this).next(".inputs").focus();
});

Кроме того, ключ не ключ, или он изменится слишком рано.

Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded domino
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded domino
0

Опираясь на ответ @ Vega

inputs.keydown(function(e) {
    var keys = [8, 9, /*16, 17, 18,*/ 19, 20, 27, 33, 34, 35, 36, 37, 38, 39, 40, 45, 46, 144, 145];

    $(this).val('');

    if (e.which == 8 && this.value.length == 0) {
        $(this).prev(inputs).focus();
    } else if ($.inArray(e.which, keys) >= 0) {
        return true;
    } else if (this.value.length > charLimit) {
        $(this).next(inputs).focus();
        return false;
    } else if (e.shiftKey || e.which <= 48 || e.which >= 58) {
        return false;
    }
}).keyup (function () {
    if (this.value.length >= charLimit && $(this).next(inputs).attr('type') === 'text') {
        $(this).next(inputs).focus();
        return false;
    }
});

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

0

Если вы используете последнюю версию jQuery, я настоятельно рекомендую вам использоватьon метод. Если вы перейдете к исходному коду jQuery, вы заметите, что все другие методы событий теперь перенаправляют на этот метод, так почему бы не использовать его напрямую:

$(document).ready(function () {
        $('.inputs').on('keyup', function(){
            $(this).next().focus();
        })
});
46

Я бы предложил установить maxlength в 1 для каждого текстового поля и перейти к следующему, как толькоval.length иmaxlength такой же.

DEMO

$(".inputs").keyup(function () {
    if (this.value.length == this.maxLength) {
      $(this).next('.inputs').focus();
    }
});

Edit: Потратил некоторое время на следующее (не полностью протестировано, но базовые тесты работали нормально)

   1. Allowing just numeric chars  
   2. Allow some control like del, backspace, e.t.c
   3. Backspace on empty textbox will move to prev textbox
   4. charLimit var to dynamically decide how many char you want to restrict.

Code:

$(function() {
    var charLimit = 1;
    $(".inputs").keydown(function(e) {

        var keys = [8, 9, /*16, 17, 18,*/ 19, 20, 27, 33, 34, 35, 36, 37, 38, 39, 40, 45, 46, 144, 145];

        if (e.which == 8 && this.value.length == 0) {
            $(this).prev('.inputs').focus();
        } else if ($.inArray(e.which, keys) >= 0) {
            return true;
        } else if (this.value.length >= charLimit) {
            $(this).next('.inputs').focus();
            return false;
        } else if (e.shiftKey || e.which <= 48 || e.which >= 58) {
            return false;
        }
    }).keyup (function () {
        if (this.value.length >= charLimit) {
            $(this).next('.inputs').focus();
            return false;
        }
    });
});

DEMO

Error: User Rate Limit Exceeded domino
Error: User Rate Limit Exceeded domino
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceededjsfiddle.net/skram/qygB2/5Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
2

попробуй это

jQuery.extend(jQuery.expr[':'], {
    focusable: function (el, index, selector) {
        return $(el).is('a, button, :input,[tabindex]');
    }
});
$(document).on('keypress', 'input,select', function (e) {
    if (e.which == 13) {
        e.preventDefault();
        // Get all focusable elements on the page
        var $canfocus = $(':focusable');
        var index = $canfocus.index(document.activeElement) + 1;
        if (index >= $canfocus.length) index = 0;
        $canfocus.eq(index).focus();
    }
});
0

Это сохранит фокус на текстовом поле после использования следующего без указания имени класса или идентификатора.

 $(this).hide();        
 $(this).next().show();
 $('input[type=text]').focus();
0

использованиеkeyup например

$(".inputs").keyup(function () {
    $(this).next().focus();
});​

Увидеть это в действииhttp://jsfiddle.net/qygB2/

Похожие вопросы