我有两个输入元素,第一个是焦点,我想通过模拟TAB按键/键下拉事件来关注第二个。 (注意:我不想使用.next()等。)
这是我的代码,灵感来自this question:
$('input').first().focus(); var e = $.Event('keydown'); e.which = 9; // TAB $(':focus').trigger(e);
代码不起作用哪里不对?
解决方法
没有简单的程序化方法来使用Javascript …所以这是一个强力的方式。
Elements that may receive focus should be navigated by user agents
according to the following rules:
- 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.- 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.- 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(); } } } } });