Клавиша Tab с полями JEditable

Question

У меня есть страница, использующая JQuery и Jeditable для создания редактируемых текстовых элементов на странице.

При редактировании элемента я хотел бы иметь возможность переходить от одного элемента к другому.

Я не уверен в том, как:

• Использование jeditable или JQuery, чтобы захватить событие нажатия клавиши табуляции (скан = 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 вход для размытия.

Не оптимальный, но он работает.

Answer 2

Одним из решений было бы сделать контейнер для редактируемых элементов выполняющим прослушивание или, возможно, даже документ. Затем его легко выполнить запрос к документу или контейнеру для редактируемых элементов, определяя, какой из них в настоящее время отредактирован, и переход к следующему элементу в списке.

Answer 3

$('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 4

Просто небольшое дополнение - если ваши jeditable поля вложены в другие элементы, то «nextBox = $ (это) .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 
    }; 
});