将插针位置设置在contenteditable div的特定位置 [英] Set caret position at a specific position in contenteditable div

问题描述

/ strong>

I

不需要跨浏览器解决方案，只需要Chrome支持

只有 vanilla JS ，无库

我见过很多很多的解决方案。 Tim Down等许多人。但没有一个能工作。我看过 window.getSelection ， .addRange 等，但是看不到它们在这里如何应用。

以下是 jsfiddle 。

（试过）代码：

  var node = document.querySelector（div）; 
 node.focus（）; 
 var caret = 10; //在第10个字符后插入插入符
 var range = document.createRange（）; 
 range.setStart（node，caret）; 
 range.setEnd（node，caret）; 
 var sel = window.getSelection（）; 
 sel.removeAllRanges（）; 
 sel.addRange（range）; 
  

解决方案

您需要将脱字符号置于文本节点内你的元素，而不是元素本身。假设您的HTML看起来像< div contenteditable =true>某些文本< / div> ，使用 firstChild



已更新jsFiddle：



http://jsfiddle.net/xgz6L/8/

代码：

  var node = document.querySelector（div）; 
 node.focus（）; 
 var textNode = node.firstChild; 
 var caret = 10; //在第10个字符后插入插入符
 var range = document.createRange（）; 
 range.setStart（textNode，caret）; 
 range.setEnd（textNode，caret）; 
 var sel = window.getSelection（）; 
 sel.removeAllRanges（）; 
 sel.addRange（range）; 
  

SEE BEFORE MARKING DUPLICATE/DOWNVOTING

1. The contenteditable div will not have child elements
2. I do not want to set the position at the end of the div
3. I do not want a cross-browser solution, only Chrome support required
4. Only vanilla JS, no libraries.

I have seen many many solutions. Many by Tim Down, and others. But none does work. I have seen window.getSelection, .addRange etc. but don't see how they apply here.

Here's a jsfiddle.

(Tried) Code:

var node = document.querySelector("div");
node.focus();
var caret = 10; // insert caret after the 10th character say
var range = document.createRange();
range.setStart(node, caret);
range.setEnd(node, caret);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);

解决方案

You need to position the caret within the text node inside your element, not the element itself. Assuming your HTML looks something like <div contenteditable="true">Some text</div>, using the firstChild property of the element will get the text node.

Updated jsFiddle:

http://jsfiddle.net/xgz6L/8/

Code:

var node = document.querySelector("div");
node.focus();
var textNode = node.firstChild;
var caret = 10; // insert caret after the 10th character say
var range = document.createRange();
range.setStart(textNode, caret);
range.setEnd(textNode, caret);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);

这篇关于将插针位置设置在contenteditable div的特定位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！