JavaScript 如何设置内容可编辑元素的光标位置

在HTML中，内容可编辑的div允许用户编辑该div元素的内容。我们需要向 div 元素传递带有 true Boolean 值的 contenteditable 属性，以使任何 div 元素都可编辑。

内容可编辑的 div 默认包含光标，有时我们可能需要在内容可编辑的 div 元素中设置光标位置以编辑该 div 的内容。然而，我们可以通过点击内容可编辑div中的特定位置来设置光标位置。

本教程将教我们使用不同的例子来设置光标在自定义位置。

语法

用户可以按照下面的语法来设置光标在可编辑内容的div中的自定义位置。

var selectedText = window.getSelection();
var selectedRange = document.createRange();
selectedRange.setStart(text_div.childNodes[0], 45);
selectedRange.collapse(true);
selectedText.removeAllRanges();
selectedText.addRange(selectedRange);
text_div.focus();

在上面的语法中，我们已经创建了一个范围，并将其添加到选定的文本中，之后，为了显示光标，我们将重点放在了内容可编辑的div上。

操作步骤

用户可以按照下面的步骤，在可编辑内容的div中的自定义位置设置光标。

第1步 - 首先，使用id、name、tag等获取可编辑内容的div。

第2步 - 之后，使用窗口对象的getSelection()方法，从窗口中选择文本。

第3步 - 接下来，我们需要使用createRange()方法创建一个范围。

第4步 - 使用范围对象的setStart()方法，通过传递数值作为参数来设置光标的起始位置。

第5步–接下来，使用collapse方法，并将true的布尔值作为参数传入，以折叠div元素边界处的所有范围。

第6步 - 之后，使用removeAllRange()方法，从文本中删除所有之前的范围。

第7步 --现在，我们需要使用addRanges()方法，在删除范围后将范围添加到选定的文本。

第8步 - 使用focus方法在可编辑的div元素上设置焦点。

例子

在下面的例子中，我们已经创建了 div 并在 div 元素中添加了一些文本。此外，我们还向 div 元素添加了 contenteditable 属性，以使其可编辑。

之后，我们使用上述算法将光标设置在一个自定义的位置。在输出中，用户可以观察到，当他们刷新网页时，它将光标设置在内容可编辑的div中的第45个位置。

<html>
<body>
   <h2>Setting up the <i> custom cursor position </i> in the content editable div</h2> <br>
   <div id = "text_div" contenteditable = "true" spellcheck = "false" style = "caret-color:red">
      This is a text of the content editable div. Users can click anywhere to place the cursor position. The cursor color is red. The initial cursor position is 45.
   </div>
   <script>

      // select content editable div element
      var text_div = document.getElementById("text_div");

      // select text from a window
      var selectedText = window.getSelection();

      // create a range
      var selectedRange = document.createRange();

      // set starting position of the cursor in the texts
      selectedRange.setStart(text_div.childNodes[0], 45);

      // collapse the range at boundaries
      selectedRange.collapse(true);

      // remove all ranges
      selectedText.removeAllRanges();

      // add a new range to the selected text
      selectedText.addRange(selectedRange);

      // focus the cursor
      text_div.focus();
   </script>
</body>
</html>

例子

在下面的例子中，我们创建了一个范围输入，用来获取用户的光标位置。之后，当用户点击按钮时，下面的代码获取输入值，并通过传递输入值作为参数调用setCusorPosition()函数。

在setCusorPosition()函数中，我们编写了代码，根据解释的算法将光标设置在一个自定义的位置。此外，我们还使用了try-catch块来捕捉错误。

在输出中，用户可以观察到，设置一个大的数值作为输入会显示一个错误信息。

<html>
<body>
   <h2>Setting up the <i> custom cursor position </i> in the content editable div</h2><br>
   <div id="editable_div" contenteditable="true" spellcheck="false" style="caret-color:blue">
      TutorialsPoint is the best platform to learn programming languages such as JavaScript, TypeScript, HTML, CSS, ReactJS, Java, Python, C, C++, etc.  TutorialsPoint also provides the best courses to learn particular programming languages from different tutors.  Students can choose their favourite tutor's course and learn concepts related to computer science with full fun.
   </div> <br />
   <input type = "number" id = "cursor_range" min = "0" value = "0" max = "500" /> <br> <br>
   <div id = "output"> </div>
   <button id = "button"> Set cursor position </button>
   <script>
      let output = document.getElementById('output');
      function setCursorPosition(customPosition) {
         try {
            evar element = document.getElementById("editable_div");
            evar selected = window.getSelection();
            evar range = document.createRange();
            erange.setStart(element.childNodes[0], customPosition);
            erange.collapse(true);
            eselected.removeAllRanges();
            eselected.addRange(range); 
            element.focus();
            output.innerHTML = "";
         } catch (error) {
            output.innerHTML = "The error is " + error.message;
         }
      }
      let btn = document.getElementById('button');
      btn.addEventListener('click', () => {
         let value = document.getElementById('cursor_range').value;
         setCursorPosition(value)
      })
   </script>
</body>
</html>