首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >JQuery中的“自动”选项卡

问JQuery中的“自动”选项卡
EN

Stack Overflow用户
提问于 2009-07-17 12:48:53
回答 3查看 8.9K关注 0票数 3

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

我有一个表单,我想在填写一个输入field.ALso后自动跳转到下一个输入DOM元素,该表单仅在页面中生成,因此我不能使用字段id作为已知factor.How的autotab来使用JQuery执行此操作。

EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2009-07-17 13:22:27

如果无法将ids添加到输入,则需要为这些属性找到不同的选择器。

如果您计划发送此数据,您可能已经为这些标记指定了一个名称。然后,您可以使用以下选择器按名称匹配下一个输入:

代码语言:javascript
复制
$('input[name=nextInputName]')

否则,您总是可以使用children()和parent()方法调用的组合来查找下一个元素,以便从当前输入遍历到下一个元素。

我个人认为最简单的解决方案是分配it,即使是在jQuery中,如果你不能在HTML语言中这样做:这将使自动聚焦变得更容易。

代码语言:javascript
复制
var counter = 0;
$('input').each(function () {
    if (!$(this).attr('id')) {
        $(this).attr('id', 'autofocus' + counter);
        counter += 1;
    }
});

您可以更改选择器以跳过某些不希望具有自动聚焦功能的元素。

然后你甚至可以在几行代码中写下自动对焦:

代码语言:javascript
复制
$('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
EN

Stack Overflow用户

发布于 2012-02-07 03:21:14

此函数用于读取输入上设置的最大长度。你可以使用$('input.autotab').autotab();

jquery函数如下:

代码语言:javascript
复制
$.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
EN

Stack Overflow用户

发布于 2014-02-20 01:47:16

这就是我能够让自动标签功能为我工作的方式。希望它能帮助其他人。

代码语言:javascript
复制
<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 */

代码语言:javascript
复制
$('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
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/1143069

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档