Question

我已将autotab.js下载到我的应用程序中。我正在尝试在我的应用程序中使用它。

我有一个Form，我想在填充一个输入字段后自动选项卡到下一个输入DOM元素。也就是说，Form只在Page中生成，所以我不能使用带有Field id的autotab作为已知因素。如何使用JQuery。

Answer 1

此函数读取输入上设置的最大长度。您可以使用$（'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 2

这就是我能够让自动选项卡功能为我工作的方式。希望它能帮助别人。

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

}）;

JQuery中的自动选项卡

2 个答案: