如何在 html contenteditable div 标签中获取选定的文本位置？
[英]How to get the selected text position in a html contenteditable div tag?
问题描述
I need the selected text position area, This is how I was done in a textarea below:
我需要选定的文本位置区域，这是我在下面的文本区域中完成的方式：
//my textarea
let textarea = document.getElementById('textarea');
textarea.addEventListener('mouseup', function(){
console.log(this.selectionStart); //return integer
})
This perfectly works on a textarea but not in a contentEditable div tag, instead of returning integer value it returns undefined, why and how to get selected text position in a contenteditable div tag?这完全适用于 textarea 但不适用于contentEditable div标签，而不是返回整数值，它返回 undefined，为什么以及如何在 contenteditable div 标签中获取选定的文本位置？
//myDiv
<div id="textarea" contenteditable="true">
<p> I am on </p>
</div>
I need a pure javascript solution, not in jquery.我需要一个纯 javascript 解决方案，而不是在 jquery 中。
3 个解决方案
解决方案1
1 已采纳 2020-03-14 01:37:02
Get Selected Position获取所选位置
You can retrieve the selected position of a contenteditable div using the document's range observer.您可以使用文档的范围观察器检索 contenteditable div 的选定位置。 The API is slightly different from a texture element. API 与纹理元素略有不同。 Note: A similar (perhaps better) solution can be found here (credit: Tim Down).注意：可以在此处找到类似（也许更好）的解决方案（来源：Tim Down）。
// Step 1: Retrieve elements let textarea = document.querySelectorAll('.textarea'); // Step 2: Bind events textarea.forEach(txt=>{ txt.addEventListener('mouseup', eventHandler) txt.addEventListener('keyup', eventHandler) }) function eventHandler(e){ getPosition(e.target) } // Step 3: Determine cursor positions function getPosition(el){ let position = {start:0,end:0}; let selection = document.getSelection(); if (el.matches('textarea')){ let offset = 1 position.start = el.selectionStart + offset position.end = el.selectionEnd + offset } else { if (selection.rangeCount){ let range = selection.getRangeAt(0); let range2 = range.cloneRange() // don't mess with visible cursor range2.selectNodeContents(el) // select content position.start = range.startOffset position.end = range.endOffset } } console.log(position.start, position.end) }
<textarea class="textarea"> I am on </textarea> <div class="textarea" contenteditable="true"> <p> I am on </p> </div>
Retrieve Selected Text检索选定的文本
This slightly deviates from the position, but does help to identify the selection.这稍微偏离了位置，但确实有助于识别选择。 Note: the example requires selecting multiple characters, not only clicking on the elements.注意：该示例需要选择多个字符，而不仅仅是单击元素。
//my textarea let textarea = document.querySelectorAll('.textarea'); textarea.forEach(txt=>txt.addEventListener('mouseup', function(){ let sel = document.getSelection() console.log(sel.toString()) }))
<textarea class="textarea"> I am on </textarea> <div class="textarea" contenteditable="true"> <p> I am on </p> </div>
Find Position of Selection查找选择位置
Once then selection text is found, search() can be used to find the position.一旦找到选择文本， search()可用于查找位置。
//my textarea let textarea = document.querySelectorAll('.textarea'); textarea.forEach(txt=>txt.addEventListener('mouseup', function(e){ let textbox = e.target; let selection = document.getSelection().toString() let position = textbox.textContent.search(selection) if(position) console.log(`"${selection}":`, position) }))
<textarea class="textarea"> I am on </textarea> <div class="textarea" contenteditable="true"> <p> I am on </p> </div>
解决方案2
0 2020-03-14 05:26:05
try this :尝试这个 ：
<html>
<body>
<div id="textarea" contenteditable="true">
<p>I am on dsvsdvsdv vsdvdsvds sddvdsvds vdsdds sdvdsvdsv vdsvdsvds dsvdsvdsvdsv vsdvdsv sddvsdvds vdsvdsvdsv dsvdefwfs</p>
</div>
<script>
function selection() {
if (window.getSelection)
return window.getSelection();
}
let textarea = document.getElementById('textarea');
textarea.addEventListener('mouseup', function () {
console.log(selection())
console.log(textarea.innerText.indexOf(selection()))
})
</script>
</body>
</html>
this perfectly works : http://jsfiddle.net/xm0Lshdb/这非常有效： http : //jsfiddle.net/xm0Lshdb/
解决方案3
-1 2020-03-14 01:38:02
You can get any selected text in a page with the Selection API .您可以使用Selection API获取页面中的任何选定文本。
This API is curently in Working Draft status.该 API 目前处于工作草案状态。
Here is an working example :这是一个工作示例：
document.addEventListener('selectionchange', () => {
console.log("Text :", document.getSelection().toString());
console.log("Position:", document.getSelection().focusOffset);
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.