如何捕获在内容可编辑的内容中单击的特定字符 div

Question

我正在寻找一种方法来在用户点击 contenteditable div 中的特定字符（或文本中的字符索引）后捕获它。仅举个例子，请考虑以下 HTML:

<div contenteditable="true">
    Hello world
</div>

假设用户在 "o" 和 "r" 之间点击，有没有办法知道，使用 JavaScript？

我想 Selection API 会涵盖这些内容，但到目前为止我的所有询问都没有结果。

非常感谢您能给我的任何帮助。

Answer 1

你可以看到插入符号的位置，我在这里为你做了一个小片段。看看它。 enter code herehttp://codepen.io/19sthil80/pen/pEooVR

Answer 2

你总是可以做这样的事情。 Codepen Link

我已经放了一个警报，这样你就可以看到它确实知道你点击了什么，如果你点击 Hello 和 World 之间的 space 它也知道。

var div = document.getElementById("div");

函数 clickify (e) { var arr = (typeof e.innerText !== 'undefined') ? e.innerText.split("") : e.textContent.split(""), 最大值 = arr.length, 我 = 0, 模板 = "$c", 结果 = "";

for (; i < max; i += 1) {
    result += template.replace("$c", arr[i]);
}

e.innerHTML = result;

}

clickify(div);

如何捕获在内容可编辑的内容中单击的特定字符 div

How to capture specific the character that was clicked on inside of a contenteditable div

html

javascript

dom

selection