带有JEditable字段的Tab键

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

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

我不确定如何：

• 使用jeditable或jquery捕获tab键事件（keycode = 9）

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

任何帮助赞赏。 谢谢！

Answer 1

我设法找到了一种方法：

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

不是最佳的，但它的工作原理。

Answer 2

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

检查一下它会对你有所帮助

Answer 3

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

Answer 4

只需稍加补充 – 如果您的可编辑字段嵌套在其他元素中，则’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 }; });