Tecla de tabulación con campos editables de JD

Tengo una página que utiliza JQuery y Jeditable para crear elementos de texto editables en la página.Tecla de tabulación con campos editables de JD

Al editar un elemento, me gustaría poder tabular de un elemento al siguiente.

estoy seguro de cómo:

Uso jeditable o jQuery para capturar el evento tecla de tabulación (código clave = 9)
Una vez que se detecte el hecho, mover el enfoque al siguiente elemento y activarlo a través de jeditable

Cualquier ayuda apreciada. ¡Gracias!

Fuente

2009-05-19 SylvanK

también ver pregunta http://stackoverflow.com/questions/3890775/tabbing-between-jeditable-fields- in-a-table –

he conseguido encontrar una manera de hacerlo:

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

En una ficha, un doble click (jeditable se establece aquí para utilizar el evento dblclick) se envía al siguiente cuadro. Si es el último cuadro de edición (asignó una clase única, tuve problemas con los selectores), va al primero.

También utilicé find ("input") porque no pude encontrar otro selector que seleccionara la entrada jeditable-created para desenfocar.

No es óptimo, pero funciona.

Fuente

2009-05-20 15:58:14 SylvanK

¿Alguien consigue esto para trabajar? cuál es la estructura de la tabla debe ser como ids/classes, etc. –

descubrió que este ejemplo no era para tablas de datos. tuvo que cambiar el div a td y agregar el cuadro de edición al td y losteditbos al último td –

Hola Mike, he respondido bajo tu pregunta: http://stackoverflow.com/questions/3890775/tabbing-between-jeditable -fields-in-a-table/7489132 # 7489132 – SylvanK

Una solución sería hacer que el contenedor para los elementos editables escuche, o incluso el documento. Luego, es una tarea fácil de consultar el documento o contenedor para elementos editables, determinar cuál es el más editado actualmente y pasar al siguiente elemento en la lista.

Fuente

2009-05-20 00:05:03 Soviut

Gracias, pero los elementos jeditables no parecen responder al foco(), que es parte del problema. No estoy seguro de cómo decirle a jeditable que enfoque un elemento; alternativamente, puedo necesitar simular un doble clic Pero un oyente universal para "tabulación" no es una mala idea. – SylvanK

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

activa esta que le ayudará a

Fuente

2011-09-23 09:27:58

Hassan, ese es mi propio código al abordar el problema de otro usuario con mi solución anterior. http://stackoverflow.com/questions/3890775/tabbing-between-jeditable-fields-in-a-table/7489132#7489132 – SylvanK

Sólo una ligera además - si sus campos jeditable están anidados dentro de otros elementos, el 'nextBox = $ (this) .A continuación ("div.editbox"); ' no va a funcionar, por lo que crear una matriz de los elementos 'dirigidos' y trabajar desde dentro ...

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

Fuente

2014-02-15 11:57:11

Tecla de tabulación con campos editables de JD

Respuesta

Cuestiones relacionadas