javascript/jquery：按下选项卡时在表单中聚焦下一个文本区域（不是输入字段）答案

【问题标题】：javascript/jquery: Focusing next textarea (not input field) in a form when tab is pressedjavascript/jquery：按下选项卡时在表单中聚焦下一个文本区域（不是输入字段）
【发布时间】：2013-01-01 04:38:20
【问题描述】：

我在表单中的所有输入都是textarea，类为large。

我正在尝试以下方法，但它不起作用：

if(e.which == 9){ // tab
    $(this).next('textarea.large').focus();
}

我试过了 $next = $(":textarea:eq(" + ($(":textarea").index(this) + 1) + ")"); $next.focus();
无济于事（:textarea 不是有效的伪元素），以及其他一些变体。

我也试过这个：

$(this).next(':input').focus();

我在 SO 上检查了其他代码，但它似乎专注于 input type='text'，并且似乎不适用于我的 textareas。

是否没有简单直接、跨浏览器兼容的方式来获取表单中的所有文本区域并转到下一个？其中一些文本区域将是动态创建的，因此它们不会在第一次加载页面时都存在。但是 tab 需要对所有这些都有效。

编辑

这很容易在一个简单的小提琴中解决，但问题是，我在以下条件和事件中发生了一些其他事情：

jQuery(document).on('keydown blur','textarea.large',function(
 if (e.which == 13 || e.type=='focusout' || e.type=='blur' || e.which == 32) //32 is space
 { ... a bunch of stuff on the page, which naturally takes focus out of the current input
  }
});

【问题讨论】：

你能为此创建并发布一个小提琴吗？

标签： javascript jquery forms tabs next

【解决方案1】：

我在使用 next() 选择最接近编辑按钮的下一个文本区域时遇到了类似的问题。编辑图像时，单击将文本放入带有 CKEDITOR 的对话框弹出窗口中，文本取自 textarea。

html结构：

<tr>
    <td>
        <img src='edit.png' class='edit_comments' />
        <br />
        <textarea>blah blah</textarea>
    </td>
</tr>
<tr>
    <td>
        <img src='edit.png' class='edit_comments' />
        <br />
        <textarea>blah blah</textarea>
    </td>
</tr>

这不起作用：

$( ".edit_comments" ).click(function() {
        var closest_textarea = $(this).next("textarea");

这样做了：

$( ".edit_comments" ).click(function() {
        var closest_textarea = $(this).closest("tr").find("textarea");

【讨论】：

【解决方案2】：

您可以将 tabindex 属性设置为 input 和 textarea 元素。

http://w3schools.com/tags/att_global_tabindex.asp

【讨论】：

我知道，但是 tabIndex 在这里不起作用，因为输入字段上的所有其他事件侦听器。我需要明确（以编程方式）指示光标在按下选项卡时将焦点移到下一个字段上。