带有JEditable字段的Tab键

Syl*_*anK 8 jquery tabs key jeditable

我有一个页面使用JQuery和Jeditable在页面上创建可编辑的文本元素.

在编辑元素时,我希望能够从一个元素到下一个元素.

我不确定如何:

  • 使用jeditable或jquery捕获tab键事件(keycode = 9)

  • 检测到该事件后,将焦点移至下一个元素并通过jeditable激活它

任何帮助赞赏.谢谢!

Syl*_*anK 6

我设法找到了一种方法:

$('div.editbox').bind('keydown', function(evt) {
    if(evt.keyCode==9) {
        $(this).find("input").blur();
        var nextBox='';
         if ($("div.editbox").index(this) == ($("div.editbox").length-1)) {
                nextBox=$("div.editbox:first");         //last box, go to first
            } else {
                nextBox=$(this).next("div.editbox");    //Next box in line
            }
        $(nextBox).dblclick();  //Go to assigned next box
        return false;           //Suppress normal tab
    };
});
Run Code Online (Sandbox Code Playgroud)

在选项卡上,双击(此处设置为jeditable以使用dblclick事件)将发送到下一个框.如果它是最后一个编辑框(分配了一个唯一的类,我遇到了选择器的问题),它会转到第一个.

我也使用了find("input"),因为我无法找到另一个选择器,它选择了jeditable-created输入进行模糊处理.

不是最佳的,但它的工作原理.