1

標準のコンテンツ編集可能な div があります。

<div id="profileBody" class="customInputDiv" contentEditable='true' autocomplete="off"></div>

基本的に、カーソルが特定のイベント (できれば動作するコードonclick、keydownまたはボタン) にある場所を検出したいと考えています。

このようなもの:
onkeydown- div 内のキャレット位置を保存してから、キャレット位置を設定します。

これは少しばかげているように聞こえますが、特定のイベントでコンテンツをわずかに変更し、カーソル位置の変更を行うときに非常に煩わしいため、必要です。

私が試したことの例なしで質問をするのは嫌いですが、以前の質問を読んだら、私が試したことを非常に詳細に提供しています。ここで行き止まりにぶつかってください!

function setCaret() {
    var el = document.getElementById("editable");
    var range = document.createRange();
    var sel = window.getSelection();
    range.setStart(el.childNodes[2], 5);
    range.collapse(true);
    sel.removeAllRanges();
    sel.addRange(range);
    el.focus();
}
​

からのデータを解析する良い方法window.getSelection();でしょうか?

見つかりました: http://jsfiddle.net/s5xAr/3/ しかし、私はしたくありません-関数を使用してキャレット位置を取得し、それを設定したいだけです

getCaretPOS();
//do something
setCaretPOS();

このコードはそれを設定しますが、それを取得することが問題のようです..

4

1 に答える 1

1

キャレットの位置を取得するには、次の関数を使用します。

function getCaretPosition(editableDiv) {
    var caretPos = 0, containerEl = null, sel, range;
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.rangeCount) {
            range = sel.getRangeAt(0);
            if (range.commonAncestorContainer.parentNode == editableDiv) {
                caretPos = range.endOffset;
            }
        }
    } else if (document.selection && document.selection.createRange) {
        range = document.selection.createRange();
        if (range.parentElement() == editableDiv) {
            var tempEl = document.createElement("span");
            editableDiv.insertBefore(tempEl, editableDiv.firstChild);
            var tempRange = range.duplicate();
            tempRange.moveToElementText(tempEl);
            tempRange.setEndPoint("EndToEnd", range);
            caretPos = tempRange.text.length;
        }
    }
    return caretPos;
}

これは、ほとんどのブラウザーで問題なく動作するはずです (もちろん、IE は除きます)。あなたのsetCaret機能でIEをカバーしているようです。

その機能は別のSO回答からのものでした。コメントもご覧ください。

デモ

于 2012-09-03T10:23:11.203 に答える