我在Chrome上遇到了一个非常奇怪的选择API（https://developer.mozilla.org/en-US/docs/Web/API/Selection）问题。我认为我正确地使用了API，尝试了不同的东西，但最终总是得到相同的结果。
考虑下面的示例HTML页面，在一些静态行为下，向后选择无法正常工作：我总是将焦点移回最右边的span元素（要在本例中运行Selection API，对于向后选择，请在最右边的span元素（带有“abc..”的元素）的开头按下左键）。
这似乎不是论坛上已经提到的东西，所以我一定是做错了什么，但...我找不到原因。Firefox的工作，因为我期望：运行这个例子，我得到了插入符号，并把注意力集中在第一个span上（有数字的那个span）。
非常感谢你的帮助！
<html>
<head>
</head>
<body>
<div id="parent1">
<span id="span0" contenteditable="true" onfocus="onFocus('span0')" onblur="onBlur('span0')">987654</span>
<span>+</span>
<span id="span1" contenteditable="true" onfocus="onFocus('span1')" onblur="onBlur('span1')">1234 6789</span>
<span>µ</span>
<span id="span2" contenteditable="true"onfocus="onFocus('span2')" onblur="onBlur('span2')">abcdefg</span>
</div>
<br><br>
<button onclick="doForwardSelection()">click</button>
<script>
span0 = document.getElementById("span0");
span2 = document.getElementById("span2");
function onFocus(id){
console.log("FOCUS on " + id);
}
function onBlur(id){
console.log("BLUR on " + id);
}
function doForwardSelection(){
docSel = document.getSelection();
// remove existing selection
docSel.removeAllRanges();
// set a new forward selection
docSel.setBaseAndExtent(span0.firstChild, 1, span2.firstChild, 2);
}
function onKeyDown(event){
//console.log(event);
if(event.key == "ArrowLeft" && document.getSelection().getRangeAt(0).startOffset == 0){
event.stopImmediatePropagation();
event.stopPropagation();
event.preventDefault();
// Do the selection manually
doMultiSelection();
}
}
function doMultiSelection(){
docSel = document.getSelection();
// first focus target
span0.focus();
console.log(docSel)
// then do the extent
console.log("I call Selection.setBaseAndExtent() now...")
//docSel.setBaseAndExtent(range.endContainer, range.endOffset, range.startContainer, range.startOffset);
docSel.setBaseAndExtent(span2.firstChild, 2, span0.firstChild, 1);
console.log(docSel);
}
document.getElementById("span2").addEventListener('keydown', onKeyDown);
</script>
</body>
</html>
1条答案
按热度按时间pgky5nke1#
所以，我想我明白为什么我的尝试不起作用了。我想做的选择不在一个可编辑元素中（多个span），它们的共同祖先也不是一个可编辑元素（div）。
如果我通过设置
divparent editable（contenteditable="true"）来进行修改，那么我可以按照自己的意愿进行选择。根据MDN上的文档，它可以解释为什么Chrome会像我最初的示例那样工作。