jquery – 模拟TAB键控:将下一个元素聚焦在“tabIndex”中

前端之家收集整理的这篇文章主要介绍了jquery – 模拟TAB键控:将下一个元素聚焦在“tabIndex”中前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有两个输入元素,第一个是焦点,我想通过模拟TAB按键/键下拉事件来关注第二个。 (注意:我不想使用.next()等。)

这是我的代码,灵感来自this question

$('input').first().focus();

var e = $.Event('keydown');

e.which = 9; // TAB
$(':focus').trigger(e);

请参阅http://jsfiddle.net/3PcPH/

代码不起作用哪里不对?

解决方法

没有简单的程序化方法来使用Javascript …所以这是一个强力的方式。

According to W3

Elements that may receive focus should be navigated by user agents
according to the following rules:

  1. Those elements that support the tabindex attribute and assign a
    positive value to it are navigated first. Navigation proceeds from the
    element with the lowest tabindex value to the element with the highest
    value. Values need not be sequential nor must they begin with any
    particular value. Elements that have identical tabindex values should
    be navigated in the order they appear in the character stream.
  2. Those
    elements that do not support the tabindex attribute or support it and
    assign it a value of “0” are navigated next. These elements are
    navigated in the order they appear in the character stream.
  3. Elements
    that are disabled do not participate in the tabbing order.

我通过存储具有tabIndex>的形式的元素的顺序来实现这一点。它们的tabIndex顺序为0,然后按照它们在文档中显示的顺序连接其余的元素。以下代码在集中在表单输入上时模拟选项卡按键,并按下字母“z”(但是您可以将其更改为您需要的任何条件):

$(':input').keypress(function(e){ 

    // if 'z' pressed
    if (e.which == 122) {

        // if we haven't stored the tabbing order
        if (!this.form.tabOrder) {

            var els = this.form.elements,ti = [],rest = [];

            // store all focusable form elements with tabIndex > 0
            for (var i = 0,il = els.length; i < il; i++) {
                if (els[i].tabIndex > 0 &&
                    !els[i].disabled && 
                    !els[i].hidden && 
                    !els[i].readOnly &&
                    els[i].type !== 'hidden') {
                    ti.push(els[i]);
                }
            }

            // sort them by tabIndex order
            ti.sort(function(a,b){ return a.tabIndex - b.tabIndex; });

            // store the rest of the elements in order
            for (i = 0,il = els.length; i < il; i++) {
                if (els[i].tabIndex == 0 &&
                    !els[i].disabled && 
                    !els[i].hidden && 
                    !els[i].readOnly &&
                    els[i].type !== 'hidden') {
                    rest.push(els[i]);
                }
            }

            // store the full tabbing order
            this.form.tabOrder = ti.concat(rest);
        }

        // find the next element in the tabbing order and focus it
        // if the last element of the form then blur
        // (this can be changed to focus the next <form> if any)
        for (var j = 0,jl = this.form.tabOrder.length; j < jl; j++) {
            if (this === this.form.tabOrder[j]) {
                if (j+1 < jl) {
                    $(this.form.tabOrder[j+1]).focus();
                } else {
                    $(this).blur();
                }
            }
        }

    }

});

See demo

原文链接:https://www.f2er.com/jquery/182922.html

猜你在找的jQuery相关文章