带有JEditable字段的Tab键

时间:2009-05-19 23:59:36

标签: jquery key tabs jeditable

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

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

我不确定如何:

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

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

任何帮助表示赞赏。谢谢!

4 个答案:

答案 0 :(得分: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
    };
});

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

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

不是最佳的,但它有效。

答案 1 :(得分:1)

$('div.edit').bind('keydown', function(evt) {
if(evt.keyCode==9) {
    var nextBox='';
    var currentBoxIndex=$("div.edit").index(this);
     if (currentBoxIndex == ($("div.edit").length-1)) {
           nextBox=$("div.edit:first");         
       } else {
            nextBox=$("div.edit").eq(currentBoxIndex+1);    
       }
    $(this).find("input").blur();
    $(nextBox).click();  
    return false;         
};
}); 

请检查一下 它会帮助你

答案 2 :(得分:0)

只需稍加补充 - 如果您的可编辑字段嵌套在其他元素中,则'nextBox = $(this).next(“div.editbox”);'不起作用,所以创建一个'目标'元素的数组,并在...内工作...

$('.editable_textarea').bind('keydown', function(evt) {
    if(evt.keyCode==9) {
        $(this).find("input").blur();
        // create an array of targeted jeditable fields
        var boxArray = $("#parent_element").find('.editable_textarea')
        var nextBox = '';
        if ($('.editable_textarea').index(this) == ($('.editable_textarea').length-1)) {
            nextBox = $(".editable_textarea:first");         //last box, go to first
        } else {
            // use the index of the active field to find the next one in the boxArray
            nextBox = boxArray[$('.editable_textarea').index(this)+1];    //Next box in line
        }
        $(nextBox).click();  //Go to assigned next box
        return false;           //Suppress normal tab
    };
});

答案 3 :(得分:0)

一种解决方案是使可编辑元素的容器可以进行监听,甚至可以进行文档处理。然后,它可以轻松查询文档或容器中的可编辑元素,确定哪个是当前编辑的,并移动到列表中的下一个元素。