Auto tab in jQuery

I downloaded autotab.js into my application. And I'm trying to use this in my application.

I have a form, and I want to automatically go to the next DOM input element after filling in one input field. So the form is created only on the page, so I can not use autotab with the field identifier as a known factor. How to do it using jQuery.

+3
source share
3 answers

If you cannot add identifiers to your inputs, you need to find different selectors for these attributes.

You probably have a name for these tags if you plan on sending this data. Then you can match the following input by name using the following selector:

$('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()
    }
});
+5

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

};

+1

, . , .

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

});

0

Source: https://habr.com/ru/post/1712856/


All Articles