带JEditable字段的Tab键 [英] Tab key with JEditable fields

问题描述

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

I have a page using JQuery and Jeditable to create editable text elements on the page.

在编辑元素时，我希望能够从一个元素跳到另一个元素.

While editing an element, I would like to be able to tab from one element to the next.

我不确定如何:

• 使用jeditable或jquery捕获Tab键事件(键码= 9)

• Use jeditable or jquery to capture the tab key event (keycode = 9)

检测到该事件后，将焦点移至下一个元素并通过可编辑的元素将其激活

Once that event is detected, move focus to the next element and activate it via jeditable

任何帮助表示赞赏.谢谢！

Any help appreciated. Thanks!

推荐答案

我设法找到一种方法:

$('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
    };
});

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

On a tab, a double click (jeditable is set here to use the dblclick event) is sent to the next box. If it's the last edit box (assigned a unique class, I was having problems with selectors), it goes to the first.

我还使用了find("input")，因为我无法找到另一个选择器，该选择器选择了可编辑创建的输入以进行模糊处理.

I also used find("input") as I was unable to find another selector that picked the jeditable-created input for blurring.

不是最佳选择，但是可以使用.

Not optimal, but it works.

这篇关于带JEditable字段的Tab键的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！