フォーカスを失うことなくcontenteditableでタブするには？

Question

タブを押すたびに、空白を挿入するのではなく、テーブルのフォーカスが失われます。タブを挿入するだけで通常のタブスペースが挿入されるように修正するにはどうすればよいですか？

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

は残念ながら、これはただの基本である

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

としてあなたのCSSを持っていることを確認してください：あなたはこのような何かを行うことができますjQueryを使用

Answer 1

。あなたのカーソルがテキストの最後にないと、物事がうまくいかないからです。カーソル位置を取得し、その位置にタブを挿入する必要があります。これらの問題に対処するために

、あなたはもう少しあなたのイベントハンドラを消費する必要があります。

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

    } 
});