Авто вкладка в JQuery

Question

Я загрузил autotab.js в свое приложение. И я пытаюсь использовать это в своем приложении.

У меня есть Форма, и я хочу автоматически перейти к следующему элементу ввода DOM после заполнения одного поля ввода. Кроме того, Форма создается только на Странице, поэтому я не могу использовать автоматическую таблицу с идентификатором поля в качестве известного фактора . Как это сделать с помощью JQuery.

Answer 1

Если вы не можете добавить идентификаторы к своим входам, вам нужно найти разные селекторы для этих атрибутов.

Возможно, у вас есть имя для этих тегов, если вы планируете отправить эти данные. Затем вы можете сопоставить следующий ввод по имени, используя следующий селектор:

$('input[name=nextInputName]')

В противном случае вы всегда можете найти следующий элемент, используя комбинацию вызовов методов children() и parent(), чтобы перейти от текущего входа к следующему.

Я лично считаю, что самым простым решением было бы назначить идентификаторы, даже в jQuery, если вы не можете сделать это в HTML: это облегчит автофокусировку.

var counter = 0;
$('input').each(function () {
    if (!$(this).attr('id')) {
        $(this).attr('id', 'autofocus' + counter);
        counter += 1;
    }
});

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

Затем вы можете даже записать автофокус в несколько строк:

$('input[id^=autofocus]').keyup(function () {
    if ($(this).val().length === $(this).attr('maxlength')) {
        var id = $(this).attr('id').match(/^autofocus(\d+)$/[1]);
        var nextId = Number(id) + 1;
        $('#autofocus' + nextId).focus()
    }
});

Answer 2

Эта функция считывает максимальную длину, установленную на входе. Вы можете вызвать его, используя $ ('input.autotab'). Autotab ();

Функция jquery выглядит следующим образом:

$.fn.autotab = function (){
$(this).keyup(function(e){
        switch(e.keyCode){
                // ignore the following keys
                case 9: // tab
                        return false;
                case 16: // shift
                        return false;
                case 20: // capslock
                        return false;
                default: // any other keyup actions will trigger
                        var maxlength = $(this).attr('maxlength'); // get maxlength value
                        var inputlength = $(this).val().length; // get the length of the text
                        if ( inputlength >= maxlength ){ // if the text is equal of more than the max length
                                $(this).next('input[type="text"]').focus(); // set focus to the next text field
                        }
        }
});

};

Answer 3

Вот так я смог заставить работать функцию автоматической вкладки. Надеюсь, что это помогает другим.

<input type="tel" id="areaPhone" name="areaPhone" data-next-field="prefixPhone" maxlength="3">
<input type="tel" id="prefixPhone" name="prefixPhone" data-next-field="suffixPhone" maxlength="3">
<input type="tel" id="suffixPhone" name="suffixPhone" maxlength="4">

/ * jQuery Ready * /

$('input[type=tel]').keyup(function () {

/* Steps:
   1. Get length values from field
   2. Get maxlength value of field and convert to integer
   3. Get data-next-field value of next field to focus on
   4. Concat a hashtag and data value of field to jump to
*/

var fieldVal = $(this).val(),
    fieldLen = fieldVal.length,
    fieldMaxLen = parseInt($(this).attr('maxlength')),
    jumpToField = $(this).data('next-field'),
    nextFieldID = '#' + jumpToField;

// Check if field length and maxlength are equal
if (fieldMaxLen === fieldLen) {

    // Check if data-next-field attribute is undefined or null
    if (jumpToField === undefined || jumpToField === null) {

    } else {
        $(nextFieldID).focus();
    }
}

});