jquery - jqueryでcontenteditable divにフォーカスを設定する

Question

フォーカスを取得している div が Firefox と IE 10 の最初の文字にカーソルを置いた理由を理解していただけますか (クロムではありません)。

JavaScriptコードは次のとおりです。

$('div').on('click', function(e) {
    $(this).html($(this).text());
});

これがjsfiddleコンテキスト全体です。

[編集]カーソルが文頭に移動する理由を誰か教えてもらえますか?

Answer 1

問題は、IE と Firefox の contentEditable の実装が異なることです。つまり、クリックすると、編集可能領域内の最初の要素が選択されます。

次のようなコードを使用して、この問題を回避できます。

var char = 3, sel; // character at which to place caret
content.focus();
if (document.selection) {
  sel = document.selection.createRange();
  sel.moveStart('character', char);
  sel.select();
}
else {
   sel = window.getSelection();
  sel.collapse(content.firstChild, char);
}

ただし、TinyMCE や CKEditor、JQuery/JQueryUI エディターなどを使用して目的の効果を得ることをお勧めします。

さらに、優れた書式設定ツールも利用できます。