포커스를 잃지 않고 contenteditable에서 탭하는 방법?

Question

나는 탭을 누를 때마다 공백을 삽입하는 대신 테이블에 포커스를 잃습니다. 탭을 사용하여 일반 탭 공간을 삽입하도록 수정하는 방법은 무엇입니까?

Answer 1

이 같은 뭔가를 할 수 jQuery 사용 :

[contenteditable] { 
    white-space : pre-wrap; 
} 

불행하게도,이 그냥 기본 그대로

$('[contenteditable]').on('keydown', function(e) { 
    if(e.which === 9){ 
    e.preventDefault(); 
    $(this).html($(this).html() + '&#009'); //insert tab character 
    } 
}) 

당신의 CSS를 가지고 있는지 확인하십시오. 커서가 텍스트의 끝에 있지 않으면 사물이 엉망이되기 때문입니다. 커서 위치를 가져 와서 해당 위치에 탭을 삽입해야합니다.

이러한 문제에 대처하기 위해, 당신은 좀 더 이벤트 핸들러를 소비해야합니다

$('[contenteditable]').on('keydown', function(e) { 
    if (e.which === 9) { 
    //prevent from tabbing out 
    e.preventDefault(); 

    var ce = this; 
    var $ce = $(ce); 
    var html = $ce.html(); 
    var textNode = ce.firstChild; 
    var range = document.createRange(); 
    var position = getSelection().getRangeAt(0).startOffset; 

    //place tab at cursor position 
    $ce.html([html.slice(0, position), '&#009', html.slice(position)].join('')); 

    //reset cursor position and place it after the tab 
    ce.focus(); 
    range.setStart(textNode, position + 1); 
    range.setEnd(textNode, position + 1); 
    var sel = window.getSelection(); 
    sel.removeAllRanges(); 
    sel.addRange(range); 
    } 
}); 

이

올바른 위치에 탭을 배치하고 커서를 다시 설정합니다.

작동하는 바이올렛 here을 볼 수 있습니다. 그러나 이것은 매우 초보적인 것이며 크롬에서만 작동 할 가능성이 매우 높습니다. 다른 브라우저 지원을 위해서는 스스로 찾아야합니다. 또한 탭 문자로 시작하고 끝나는 가장자리의 경우는 여기에서 실패하지만, 이것은 올바른 방향으로 조금 움직여 줄 것입니다.

Answer 2

아래 코드를 사용하십시오. 나는 그것을 테스트하지는 않았지만 잘 동작 할 것이다.

jQuery(document).ready(function(){ 
    document.addEventListener("keydown", function(event) { 
     if(event.which == 9) 
     { 
     jQuery(this).val(jQuery(this).val()+""+&#009); 
     } 

    } 
});