Tab-Taste mit Jeditable Feldern

Question

Ich habe eine Seite mit JQuery und Jeditable in editierbare Textelemente auf der Seite erstellen.

Während ein Element bearbeiten, würde Ich mag zum nächsten Tab von einem Element zu können.

Ich bin nicht sicher, wie man:

• Mit Jeditable oder jquery der Tabulatortaste Ereignis (keycode = 9)

erfassen

• Sobald das Ereignis erkannt wird, den Fokus auf das nächste Element bewegen und aktivieren sie über Jeditable

Jede Hilfe sehr geschätzt. Dank!

Answer 1

ich es geschafft, einen Weg zu finden, es zu tun:

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

Auf einer Registerkarte ein Doppelklick (Jeditable wird hier eingestellt, das dblclick Ereignis verwenden) wird zum nächsten Feld geschickt. Wenn es das letzte Bearbeitungsfeld ist (eine einzigartige Klasse zugewiesen, ich hatte Probleme mit Selektoren haben), geht es auf die erste.

ich auch find ( „Input“) verwendet, da ich nicht in der Lage war, einen anderen Wähler zu finden, die Jeditable erstellte Eingang für Verwischung gepflückt.

Nicht optimal, aber es funktioniert.

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

Dieses prüfe es wird Ihnen helfen,

Answer 3

Eine Lösung wäre, um den Behälter zu machen für die editierbare Elemente das Zuhören zu tun, oder vielleicht sogar das Dokument. Dann ist es eine einfache Aufgabe, das Dokument oder Behälter für editierbare Elemente abzufragen, zu bestimmen, welche die meisten derzeit bearbeitet und in der Liste auf das nächste Element zu bewegen.

Answer 4

Nur ein geringer Zusatz - wenn Ihr Jeditable Felder in anderen Elementen verschachtelt, die 'nextBox = $ (this) .next ( "div.editbox");' wird nicht funktionieren, so erstellen ein Array der ‚gezielte‘ Elemente und die Arbeit von innen ...

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