Клавиша Tab с полями JEditable - PullRequest
Новая
       22

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

8 голосов
/ 20 мая 2009

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

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

Я не уверен, как:

  • Используйте jeditable или jquery для захвата события клавиши табуляции (код клавиши = 9)

  • Как только это событие обнаружено, переместите фокус на следующий элемент и активируйте его с помощью jeditable

Любая помощь приветствуется. Спасибо!

Ответы [ 4 ]

6 голосов
/ 20 мая 2009

Мне удалось найти способ сделать это: 

$('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-созданный вход для размытия.

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

1 голос
/ 23 сентября 2011 
$('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;         
};
});

проверьте это это поможет вам

0 голосов
/ 15 февраля 2014

Просто небольшое дополнение - если ваши 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
    };
});
0 голосов
/ 20 мая 2009

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

...