如何从contenteditable div开始到光标位置的文本 [英] How to get text from contenteditable div from beginning to the cursor position

问题描述

有没有办法从开头到光标位置从 contenteditable div获取文字。

例如：

< div id =   editableDiv contenteditable =   true> 
快速的棕色狐狸跳过一只懒狗。 
 < /   div  >  

假设1：光标在快速后闪烁。对函数的查询必须返回快速



假设2：光标在末尾闪烁 。对函数的查询必须返回快速的棕色狐狸跳过一只懒狗。



以下是得到Caret potition的功能

 function getCaretCharOffset（）{
  var  element = document。 getElementById（  editableDiv）; 
  var  caretOffset =  0 ; 
  if （ typeof  window.getSelection！=    undefined）{
  var  range = window.getSelection（）。 getRangeAt（ 0 ）; 
  var  preCaretRange = range.cloneRange（）; 
 preCaretRange.selectNodeContents（element）; 
 preCaretRange.setEnd（range.endContainer，range.endOffset）; 
 caretOffset = preCaretRange.toString（）。length; 
} 
 其他 如果（ typeof  document.selection！=   undefined&&& document.selection.type ！=  控制）
 {
  var  textRange = document.selection.createRange（）; 
  var  preCaretTextRange = document.body.createTextRange（）; 
 preCaretTextRange.moveToElementText（element）; 
 preCaretTextRange.setEndPoint（  EndToEnd，textRange）; 
 caretOffset = preCaretTextRange.text.length; 
} 
 console.log（caretOffset）; 
  return  caretOffset; 
} 

解决方案

这是解决方案



< pre lang =cs> getTextFromHeadToCaret：function（）{
var element = document.getElementById（ editableDiv）;
var caretOffset = 0 ;
if （ typeof window.getSelection！= undefined）{
var range = window.getSelection（）。 getRangeAt（ 0 ）;
var preCaretRange = range.cloneRange（）;
preCaretRange.selectNodeContents（element）;
preCaretRange.setEnd（range.endContainer，range.endOffset）;
caretOffset = preCaretRange.toString（）。length;
} 其他 如果（ typeof document.selection！= undefined&& document.selection.type！= Control）{
var textRange = document.selection.createRange（）;
var preCaretTextRange = document.body.createTextRange（）;
preCaretTextRange.moveToElementText（element）;
preCaretTextRange.setEndPoint（ EndToEnd，textRange）;
caretOffset = preCaretTextRange.text.length;
}
var divStr =

（' ＃editableDiv'）。text（）;
return divStr.substring（ 0 ，caretOffset）;
}

Is there a way to get text from contenteditable div from beginning to cursor position.
For example:

<div id="editableDiv" contenteditable="true">
    the quick brown fox jumps over a lazy dog.
</div>

Assumption 1: cursor blinking after the word quick. The query to the function must return the quick

Assumption 2: cursor blinking at the end of the sentence. The query to the function must return the quick brown fox jumps over a lazy dog.

Below is the function to get Caret potition

function getCaretCharOffset() {
    var element = document.getElementById("editableDiv");
    var caretOffset = 0;
    if (typeof window.getSelection != "undefined") {
        var range = window.getSelection().getRangeAt(0);
        var preCaretRange = range.cloneRange();
        preCaretRange.selectNodeContents(element);
        preCaretRange.setEnd(range.endContainer, range.endOffset);
        caretOffset = preCaretRange.toString().length;
    }
    else if (typeof document.selection != "undefined" && document.selection.type != "Control")
    {
        var textRange = document.selection.createRange();
        var preCaretTextRange = document.body.createTextRange();
        preCaretTextRange.moveToElementText(element);
        preCaretTextRange.setEndPoint("EndToEnd", textRange);
        caretOffset = preCaretTextRange.text.length;
    }
    console.log(caretOffset);
    return caretOffset;
}

解决方案

Here is the solution

getTextFromHeadToCaret: function () {
                var element = document.getElementById("editableDiv");
                var caretOffset = 0;
                if (typeof window.getSelection != "undefined") {
                    var range = window.getSelection().getRangeAt(0);
                    var preCaretRange = range.cloneRange();
                    preCaretRange.selectNodeContents(element);
                    preCaretRange.setEnd(range.endContainer, range.endOffset);
                    caretOffset = preCaretRange.toString().length;
                } else if (typeof document.selection != "undefined" && document.selection.type != "Control") {
                    var textRange = document.selection.createRange();
                    var preCaretTextRange = document.body.createTextRange();
                    preCaretTextRange.moveToElementText(element);
                    preCaretTextRange.setEndPoint("EndToEnd", textRange);
                    caretOffset = preCaretTextRange.text.length;
                }
                var divStr =

('#editableDiv').text(); return divStr.substring(0, caretOffset); }

这篇关于如何从contenteditable div开始到光标位置的文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！