Tab键与JEditable字段

Question

Tab键与JEditable字段

jquerykeytabsjeditable

8

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

当编辑元素时，我想能够从一个元素切换到下一个元素。

我不确定如何：

- 使用jeditable或jquery捕获Tab键事件（keycode = 9） - 一旦检测到该事件，移动焦点到下一个元素并通过jeditable激活它

非常感谢您的帮助！

- SylvanK

请参考以下问题的链接：https://dev59.com/XFHTa4cB1Zd3GeqPNwPb。 - Mike Henke

4个回答

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;         
};
});

请检查一下这个，它会对你有所帮助。

- Engr M Hassan

Hassan，这是我自己的代码，用于解决另一个用户对我上面提供的解决方案的问题。https://dev59.com/XFHTa4cB1Zd3GeqPNwPb#7489132 - SylvanK

0

只需稍微添加一点-如果您的jeditable字段嵌套在其他元素中，那么'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
    };
});

- Josef M. Schomburg

0

一个解决方案是让可编辑元素的容器进行监听，或者甚至是整个文档。然后，只需查询文档或容器中的可编辑元素，确定哪个是最近编辑的，然后移动到列表中的下一个元素即可。

- Soviut

谢谢，但是jeditable元素似乎不响应focus()，这是问题的一部分。我不确定如何告诉jeditable将焦点放在一个元素上；或者我可能需要模拟双击？但是一个用于“tab”键的通用监听器也不是一个坏主意。 - SylvanK

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- SylvanK · Accepted Answer

我找到了一种方法来实现它：

$('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创建的输入以进行模糊处理。

不是最佳选择，但它可以工作。