[英]contenteditable selected text save and restore
我發現這篇文章顯示了如何從一個可信的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>
典型的用途是顯示某種小部件或對話框以接受來自用戶的輸入(因此可能破壞原始選擇)並在隱藏該小部件之后恢復選擇。 實際上使用這些功能非常簡單; 最大的危險是在它被摧毀后試圖保存選擇。
這是一個簡單的例子。 它顯示文本輸入並使用該輸入中的文本覆蓋可編輯<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>
只有一個建議:
很難使用本機瀏覽器選擇+ contenteditable +處理所有不同的瀏覽器方面+從頭開始保存和恢復選擇等。
我會推薦rangy https://code.google.com/p/rangy/wiki/SelectionSaveRestoreModule
專門為您做出選擇的所有努力工作
檢查文檔,它很容易使用;)希望它會幫助你
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.