范围和插入位置不匹配 [英] Range and Caret position doesn't match
问题描述
我注意到MS Edge存在这个问题，插入位置和范围在可编辑的内容中不匹配或错误。
$（＃c）。click var sel = window.getSelection（）; var range = sel.getRangeAt（0）; $（＃res）。get（0）.textContent =START_OFFSET：+ range.startOffset + - >+ range .startContainer.innerHTML; console.log（Range count：+ sel.rangeCount）;}）;
< HTML>< HEAD> < script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js>< / script>< / head>< body> < div id =ccontenteditable =true> <跨度> TEST< /跨度> < / DIV> < / span>< / body>< / html>
如果打开MS Edge时很麻烦，请看下面的代码片段：
结果应该是4 - > TEST
奇怪的是，指向包含TEST的innerHTML的跨度节点，但起始偏移量和结束偏移量显示为1.范围数据类似于 | TEST 但在视觉上它是 TEST | 。
有没有办法解决这个问题？
通过JS，我似乎无法捕捉范围类内的正确信息，以正确调整startOffset和endOffset，除非检测到附近点击位置并在那里插入插入符号，但我认为它很乏味。
我发现此。有没有跟进解决方案？
$ b
更新
$ b
跨度 code>元素会干扰范围。
$（＃c）。click var sel = window.getSelection（）; var range = sel.getRangeAt（0）; $（＃res）。get（0）.textContent =START_OFFSET：+ range.startOffset + - >+ range .startContainer.innerHTML; console.log（range.startContainer）;}）;
< HTML>< HEAD> < script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js>< / script>< / head>< body> < div id =ccontenteditable =true> TEST< / div> < / span>< / body>< / html>
我缩小了问题范围，< span> 是
$ b
[Object Text] ，请检查 startContainer 属性。在最后一个字符之后，文本元素结束，但是 span 不会。因此，您现在位于文本元素（索引0）之后并位于 span 中的第一个索引处。其他主流浏览器没有这个问题，因为文本元素会在最后一个字符后面继续。这很可能是Edge bug。
删除 span 以解决问题。
I noticed this problem in MS Edge, the caret position and range doesn't match up or wrong inside a content editable.
$("#c").click(function(e) {
var sel = window.getSelection();
var range = sel.getRangeAt(0);
$("#res").get(0).textContent = "START_OFFSET:" + range.startOffset + "->" + range.startContainer.innerHTML;
console.log("Range count: " + sel.rangeCount);
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
</head>
<body>
<div id="c" contenteditable="true">
<span>TEST</span>
</div>
<span id="res"></span>
</body>
</html>
In case if it is a hassle to open MS Edge, here's the snippet :
The result should be 4 -> TEST
Weird enough, the actual caret is pointing at the span node which contains an innerHTML of TEST but the start offset and end offset are showing 1. By the range data it is like this |TEST but visually it is TEST|.
Is there a way in solving this?
Via JS, I can't seem to catch the correct information inside the range class to adjust properly the startOffset and endOffset unless I detect the nearest letter near the click location and insert the caret there, but I believe it's tedious.
I found this. is there any follow up regarding to a solution? Thanks.
Update
The span element is interfering with the range.
$("#c").click(function(e) {
var sel = window.getSelection();
var range = sel.getRangeAt(0);
$("#res").get(0).textContent = "START_OFFSET:" + range.startOffset + "-> " + range.startContainer.innerHTML;
console.log(range.startContainer);
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
</head>
<body>
<div id="c" contenteditable="true">
TEST
</div>
<span id="res"></span>
</body>
</html>
I've narrowed down the problem and the <span> is the root of all evil.
The spans text is wrapped inside a text element, in which you are navigating ([Object Text], check the startContainer property). After the last char, the text element ends, the span however does not. So you're now after the text element (index 0) and at the first index in the span. Other major browsers do not have this problem, because the text element continues after the last character. This is most likely an Edge bug.
Remove the span to solve the problem.
这篇关于范围和插入位置不匹配的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
