Touche Tab avec les champs JEditable

Question

J'ai une page utilisant JQuery et Jeditable pour créer des éléments de texte modifiables sur la page. Lors de la modification d'un élément, j'aimerais pouvoir passer d'un élément à l'autre.

Je ne suis pas sûr de savoir comment:

• Utilisez jeditable ou jquery pour capturer l'onglet événement clé (keycode = 9)

• Une fois que cet événement est détecté, déplacer le focus sur l'élément suivant et l'activer via jeditable

Toute aide appréciée. Merci!

Answer 1

j'ai réussi à trouver une façon de le faire:

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

Sur un onglet, un double-clic (jeditable est défini ici pour utiliser l'événement dblclick) est envoyé à la case suivante. Si c'est la dernière case d'édition (assignée à une classe unique, j'avais des problèmes avec les sélecteurs), ça va au premier.

J'ai également utilisé find ("input") car je n'ai pas pu trouver un autre sélecteur qui a choisi l'entrée créée par jediable pour le flou.

Pas optimal, mais cela fonctionne.

Answer 2

Une solution serait de faire le conteneur pour les éléments éditables à l'écoute, ou peut-être même le document. Il est alors facile d'interroger le document ou le conteneur pour les éléments modifiables, de déterminer lequel est le plus édité et de passer à l'élément suivant de la liste.

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

faire vérifier cette il vous aidera

Answer 4

Juste un léger ajout - si vos champs jeditable sont imbriqués dans d'autres éléments, le « TerminalPlus = $ (this) .next ("div.editbox") ' ne fonctionne pas, donc créer un tableau des éléments « ciblés » et le travail de l'intérieur ...

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