Phím Tab với các trường JEditable

Question

Tôi có một trang sử dụng JQuery và Jeditable để tạo các phần tử văn bản có thể chỉnh sửa trên trang.

Trong khi chỉnh sửa phần tử, tôi muốn có thể tab từ phần tử này sang phần tử tiếp theo.

Tôi không chắc chắn làm thế nào để:

• Sử dụng jeditable hoặc jquery để nắm bắt sự kiện phím tab (keycode = 9)

• Khi trường hợp được phát hiện, di chuyển tập trung vào các yếu tố tiếp theo và kích hoạt nó qua jeditable

Bất kỳ trợ giúp nào được đánh giá cao. Cảm ơn!

Answer 1

Tôi cố gắng tìm ra cách để làm điều đó:

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

Mở một tab, nhấn đúp chuột (jeditable được thiết lập vào đây để sử dụng các sự kiện dblclick) sẽ được gửi đến hộp bên cạnh. Nếu đó là hộp chỉnh sửa cuối cùng (được gán một lớp duy nhất, tôi đã gặp sự cố với bộ chọn), nó sẽ chuyển sang phần đầu tiên.

Tôi cũng đã sử dụng tìm ("đầu vào") vì tôi không thể tìm thấy bộ chọn khác đã chọn đầu vào được tạo có thể chỉnh sửa để làm mờ.

Không tối ưu, nhưng nó hoạt động.

Answer 2

Một giải pháp là làm cho vùng chứa cho các yếu tố có thể chỉnh sửa thực hiện việc nghe hoặc thậm chí là tài liệu. Sau đó, một nhiệm vụ dễ dàng là truy vấn tài liệu hoặc vùng chứa cho các phần tử có thể chỉnh sửa, xác định phần tử nào được chỉnh sửa nhiều nhất và chuyển sang phần tử tiếp theo trong danh sách.

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

làm kiểm tra này nó sẽ giúp bạn

Answer 4

Chỉ cần một bổ sung nhỏ - nếu lĩnh vực jeditable của bạn được lồng trong các yếu tố khác, các 'nextBox = $ .next (this) ("div.editbox"); ' sẽ không làm việc, vì vậy tạo ra một mảng của các yếu tố 'nhắm' và làm việc từ bên trong ...

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