8

コンテンツ編集可能なdivから選択したテキストを保存および復元する方法に関する2つの機能を示すこの投稿に出くわしました。以下のdivをcontenteditableとして設定し、他の投稿の2関数を使用しています。これらの関数を使用して、選択したテキストを保存および復元する方法。

<div style="width:300px;padding:10px;" contenteditable="true">test test test test</div>

<script>
function saveSelection() {
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            return sel.getRangeAt(0);
        }
    } else if (document.selection && document.selection.createRange) {
        return document.selection.createRange();
    }
    return null;
}

function restoreSelection(range) {
    if (range) {
        if (window.getSelection) {
            sel = window.getSelection();
            sel.removeAllRanges();
            sel.addRange(range);
        } else if (document.selection && range.select) {
            range.select();
        }
    }
}
</script>
4

2 に答える 2

20

典型的な使用法は、ユーザーからの入力を受け入れるためのある種のウィジェットまたはダイアログを表示し（したがって、元の選択を破壊する可能性があります）、そのウィジェットが非表示になった後に選択を復元することです。実際に関数を使用するのは非常に簡単です。最大の危険は、選択がすでに破棄された後に選択を保存しようとすることです。

これが簡単な例です。テキスト入力が表示され、編集可能なテキストの選択がその入力のテキストで上書きされ<div>ます。ここに貼り付けるにはコードが多すぎるため、完全なコードは次のとおりです：http ://www.jsfiddle.net/timdown/cCAWC/3/

エキス：

<div id="test" contenteditable="true">Some editable text</div>
<input type="button" unselectable="on" onclick="displayTextInserter();"
    value="Insert text">
<div id="textInserter">
    <input type="text" id="textToInsert">
    <input type="button" onclick="insertText()" value="Insert">
</div>

<script type="text/javascript">
var selRange;

function displayTextInserter() {
    selRange = saveSelection();
    document.getElementById("textInserter").style.display = "block";
    document.getElementById("textToInsert").focus();
}     

function insertText() {
    var text = document.getElementById("textToInsert").value;
    document.getElementById("textInserter").style.display = "none";
    restoreSelection(selRange);
    document.getElementById("test").focus();
    insertTextAtCursor(text);
}
</script>
于 2011-01-14T10:25:03.617 に答える
0

ただ1つの推奨事項：

ネイティブブラウザの選択+コンテンツ編集可能+すべての異なるブラウザの側面の処理+選択の保存と復元などを最初から行うのは困難です。

私は あなたのためにすべてのハードワークをするために特別に行われたrangyhttps : //code.google.com/p/rangy/wiki/SelectionSaveRestoreModuleをお勧めします

ドキュメントを確認してください、それは使いやすいです;）それがあなたを助けることを願っています

于 2013-06-27T22:33:28.777 に答える