将插针位置设置在contenteditable div的特定位置 [英] Set caret position at a specific position in contenteditable div
问题描述
不需要跨浏览器解决方案,只需要Chrome支持
我见过很多很多的解决方案。 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 $ c $元素的属性将得到文本节点。
已更新jsFiddle:
代码:
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
- The contenteditable div will not have child elements
- I do not want to set the position at the end of the div
- I do not want a cross-browser solution, only Chrome support required
- 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:
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屋!