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

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

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

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

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

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

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


jquery tabs key jeditable
person SylvanK    schedule 19.05.2009    source источник
comment
также см. вопрос stackoverflow.com/ вопросы/3890775/   -  person Mike Henke    schedule 16.09.2011

Ответы (4)


arrow_upward
6
arrow_downward

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

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

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

person SylvanK    schedule 20.05.2009
comment
Кто-нибудь заставить это работать? какая структура таблицы должна быть похожа на идентификаторы/классы и т. д. - person Mike Henke; 15.09.2011
comment
понял, что этот пример не для таблиц данных. пришлось переключить div на td и добавить поле редактирования в td и lasteditbos в последний td - person Mike Henke; 16.09.2011
comment
Привет, Майк, я ответил на твой вопрос: stackoverflow.com/questions/3890775/ - person SylvanK; 20.09.2011
comment
Привет, @SylvanK, мне нужна твоя помощь со сценарием. Не могли бы вы мне помочь, пожалуйста? stackoverflow.com/questions/14303023/ - person breq; 13.01.2013

arrow_upward
1
arrow_downward 

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

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

person Engr M Hassan    schedule 23.09.2011
comment
Хассан, это мой собственный код решения проблемы другого пользователя с моим решением выше. stackoverflow.com /вопросы/3890775/ - person SylvanK; 30.09.2011

arrow_upward
0
arrow_downward

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

person Soviut    schedule 20.05.2009
comment
Спасибо, но jeditable элементы не реагируют на focus(), что является частью проблемы. Я не уверен, как сказать jeditable, чтобы сфокусироваться на элементе; в качестве альтернативы мне может понадобиться имитировать двойной щелчок? Но универсальный слушатель для табуляции — неплохая идея. - person SylvanK; 20.05.2009

arrow_upward
0
arrow_downward

Просто небольшое дополнение - если ваши 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
    };
});
person Josef M. Schomburg    schedule 15.02.2014