Jeditable Fields가있는 탭 키

Question

jQuery와 Jeditable을 사용하여 페이지에 편집 가능한 텍스트 요소를 작성하는 페이지가 있습니다.

요소를 편집하는 동안 하나의 요소에서 다음 요소로 탭 할 수 있습니다.

어떻게 해야할지 잘 모르겠습니다.

• Jeditable 또는 JQuery를 사용하여 탭 키 이벤트를 캡처합니다 (KeyCode = 9).

• 해당 이벤트가 감지되면 다음 요소로 초점을 이동하여 Jeditable을 통해 활성화하십시오.

모든 도움이 감사합니다. 감사!

Answer 1

나는 그것을 할 수있는 방법을 찾았다 :

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

탭에서 더블 클릭 (DBLClick 이벤트를 사용하기 위해 Jeditable이 여기에 설정되어 있음)이 다음 상자로 전송됩니다. 마지막 편집 상자라면 (고유 한 클래스를 지정하고, 선택기에 문제가 있었음) 첫 번째로갑니다.

나는 또한 흐릿함을 위해 제시 가능한 제작 입력을 선택한 다른 선택기를 찾을 수 없었기 때문에 Find ( "Input")를 사용했습니다.

최적은 아니지만 작동합니다.

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

이를 확인하십시오. 도움이 될 것입니다

Answer 3

한 가지 해결책은 편집 가능한 요소의 컨테이너가 청취 또는 심지어 문서를 수행하는 것입니다. 그런 다음 편집 가능한 요소를 위해 문서 나 컨테이너를 쿼리하고 현재 가장 많이 편집 된 것을 결정하고 목록의 다음 요소로 이동하는 쉬운 작업입니다.

Answer 4

약간의 추가 - 제시 가능한 필드가 다른 요소 내에 중첩되면 '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
    };
});