javascript - Javascript/jQueryは編集可能なDIVにカーソルを設定します

Question

カーソルを動かすいくつかの方法を見てみましたが、エレガントで機能的な方法を思い付くことができないようです。

基本的に、次の疑似コードを実行するためにコード行を呼び出したいと思います。

1. 編集可能なdivでテキストの長さを取得する
2. カーソルを最後の文字に設定

例えば

これはサンプルテキストです|

カーソルをどこに設定するか| は

これはどれくらい簡単ですか？

JsFiddle：http：//jsfiddle.net/v8agZ/5/

ありがとう

Answer 1

これは、編集可能なdivの最後にカーソルを置くことができる方法です（この質問から採用）。

HTML

<div id="mydiv">
    Lorem ipsum dolor sit amet,
    <br />
    <br />
    consectetur adipisicing elit
</div>

Javascript

function setCursorToEnd(ele) {
    var range = document.createRange();
    var sel = window.getSelection();
    range.setStart(ele, ele.childNodes.length - 1);
    range.collapse(true);
    sel.removeAllRanges();
    sel.addRange(range);
    ele.focus();
}

var mydiv = document.getElementById("mydiv");
setCursorToEnd(mydiv);

jQueryを使用する場合（この場合は役に立ちません）、次のようにandメソッドmydivを使用して要素を取得できます。$()get()

var mydiv = $("#mydiv").get(0);
setCursorToEnd(mydiv);

Answer 2

jCaretプラグインが使えると思います

デモ、私のものではない