如何解决用Javascript将插入符号移动到contenteditable中的搜索字符串
我有一个内容可编辑的div,我需要将插入符号移动到字符串的位置,但是我看不到如何执行此操作。有人有建议吗?
<div id='mydiv' contenteditable='true'>Lorem ipsum dolor sit amet,consectetur adipiscing elit.
Sed eget libero sit <mark>amet</mark> and **peekabo** magna sagittis sagittis quis nec risus.
Pellentesque feugiat pharetra purus id pharetra.
</div>
<script>
doFindStringAndMoveCaret('mydiv','peekabo');
function doFindStringAndMoveCaret(elem,searchFor) {
// Find searchFor string in the elem.innerHTML,and then move the
// cursor to the beginning of that text
??
}
理想的普通旧javascript(不是jQuery)
谢谢 安倍
解决方法
function doFindStringAndMoveCaret(elem,text) {
function setCurrentCursorPosition(element,chars) {
element.focus()
if (chars >= 0) {
var selection = window.getSelection();
range = createRange(element.parentNode,{
count: chars
});
if (range) {
range.collapse(false);
selection.removeAllRanges();
selection.addRange(range);
}
}
function createRange(node,chars,range) {
if (!range) {
range = document.createRange()
range.selectNode(node);
range.setStart(node,0);
}
if (chars.count === 0) {
range.setEnd(node,chars.count);
} else if (node && chars.count > 0) {
if (node.nodeType === Node.TEXT_NODE) {
if (node.textContent.length < chars.count) {
chars.count -= node.textContent.length;
} else {
range.setEnd(node,chars.count);
chars.count = 0;
}
} else {
for (var lp = 0; lp < node.childNodes.length; lp++) {
range = createRange(node.childNodes[lp],range);
if (chars.count === 0) {
break;
}
}
}
}
return range;
}
}
setCurrentCursorPosition(elem,new RegExp(text).exec(elem.innerHTML).index - 1)
}
doFindStringAndMoveCaret(document.getElementById('mydiv'),'peekabo')
<div id='mydiv' contenteditable='true'>Lorem ipsum dolor sit amet,consectetur adipiscing elit.
Sed eget libero sit <mark>amet</mark> and **peekabo** magna sagittis sagittis quis nec risus.
Pellentesque feugiat pharetra purus id pharetra.
</div>
这只是找到字符串在innerHTML
的{{1}}中的位置,从中减去div
,然后使用1
聚焦setCurrentCursorPosition
并将光标移到那里:
div
该函数中的其余代码已修改,并取自https://stackoverflow.com/a/41034697/。
如果要将光标移动到文本的开始,请使用
setCurrentCursorPosition(elem,new RegExp(text).exec(elem.innerHTML).index - 1)
相反。
setCurrentCursorPosition(elem,new RegExp(text).exec(elem.innerHTML).index - text.length - 1)
function doFindStringAndMoveCaret(elem,new RegExp(text).exec(elem.innerHTML).index - text.length - 1)
}
doFindStringAndMoveCaret(document.getElementById('mydiv'),'peekabo')
,
好吧,我想我终于完成了。
function doFindStringAndMoveCaret(editor,findTx) {
treeObject = {}
var element = editor;
editor.focus();
function doTreeWalk(element,object) {
var nodeList = element.childNodes;
if (nodeList != null) {
if (nodeList.length) {
object[element.nodeName] = [];
for (var i = 0; i < nodeList.length; i++) {
if (nodeList[i].nodeType == 3) {
var p=nodeList[i].nodeValue.indexOf(findTx);
if ( p!=-1 ) {
var sel=window.getSelection();
var range=sel.getRangeAt(0);
range.setStart(nodeList[i],p);
range.setEnd(nodeList[i],p+findTx.length);
return;
}
}
else {
object[element.nodeName].push({});
doTreeWalk(nodeList[i],object[element.nodeName][object[element.nodeName].length - 1]);
}
}
}
}
}
doTreeWalk(element,treeObject);
return;
}
doFindStringAndMoveCaret(document.getElementById('mydiv'),'peekabo');
可以在https://jsfiddle.net/Abeeee/krLeop49/6/
上找到一个工作示例仍然感谢
问候 安倍(Abe)
,document.getElementById(elem).focus
尝试一下 或者这个
textSelect(document.getElementById(elem),1);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。