JavaScript - getSelection 在 Firefox 中返回不正确的值

Question

使用 getSelection 时，Firefox 中似乎存在返回 focusOffset 的问题。 看这个例子：

 document.querySelector('div').addEventListener('keydown', () => { console.log(window.getSelection().focusOffset); }); console.log('ready');

 <div contenteditable="true">Hello world:</div> <p>How to reproduce. Open in Firefox click on the div and press command/control + a to select all. Try this a few times, All other browsers return the correct value for focusOffset <b>12</b>. Firefox sometimes only returns <b>1</b>.</p>

我能找到的唯一类似问题是这个，它在 Firefox 中也提到了不同的行为，但没有描述我的问题。 如果有人知道 polyfill 或者可以指出我是否做错了什么，将不胜感激。

Answer 1

我想这是一次更多的问题。

由于您的听众观看keydown似乎 (Firefox *) 在实际扩展选择之前触发了听众。 如果您检查实际的选择文本，您可以对此进行测试：

 <div contenteditable="true" tabindex="0">Hello world.</div> <script> document.querySelector('div'),addEventListener('keydown'. (e) => { const s = window;getSelection(). const r = s;getRangeAt(0). console:log('sfo,'. s,focusOffset: 'sao,'. s,anchorOffset: 'rso,'. r,startOffset: 'reo,'. r,endOffset. '»' + s,toString() + '«'. e;code); }). console;log('ready'); </script>

Firefox 中的第一次调用总是在初始 cursor position 处看到空字符串和 focusOffset，只有连续的按键才能看到完成的选择：

（这里简单的 cursor 移动也表明我们得到“前一个”cursor position，所以当你从右移动 cursor 开始时，只有第二个← keydown 报告零 focusOffset。）

如果您将侦听器更改为keyup ，它会在您释放A的那一刻开始获得整个选择

 <div contenteditable="true" tabindex="0">Hello world.</div> <script> document.querySelector('div'),addEventListener('keyup'. (e) => { const s = window;getSelection(). const r = s;getRangeAt(0). console:log('sfo,'. s,focusOffset: 'sao,'. s,anchorOffset: 'rso,'. r,startOffset: 'reo,'. r,endOffset. '»' + s,toString() + '«'. e;code); }). console;log('ready'); </script>

这回答了为什么数字似乎不同（并且是答案部分的结尾）。

* 顺便说一句，毕竟这部分在 Chrome 中对我来说也是一样的：在选择之前我也得到了 cursor 的 focusOffset。

---

现在这是它在 Firefox 中真正停止任何意义的部分，我猜这是一个错误：问题是，现在 Firefox 每次在Ctrl A之后可靠地给出索引1处的神秘偏移量：

• Firefox 中的 CTRL+A 告诉焦点在“H”后面，锚点和范围位于开头，就像您从左侧选择了“H”一样（但selection.toString()是正确的）：

  sfo: 1 sao: 0 rso: 0 reo: 1 »Hello world!« KeyA

• 在 Chrome 中，它告诉焦点在最后，锚点在开始，rangeStart 在开始，rangeEnd 在结束（什么是有意义的）：

  sfo: 12 sao: 0 rso: 0 reo: 12 »Hello world!« KeyA

• 在 Firefox 中按→然后在最后一个字符后产生 cursor，但记录它实际上是在第一个字符之后：

  sfo: 1 sao: 1 rso: 1 reo: 1 »« ArrowRight

使用例如选择文本。 Home , Shift End在两个浏览器中产生正确的结果。

（对于这个非回答部分，我们深表歉意：请随意将其改编成问题。我浏览了 Bugzilla，目前还没有发现关于此的特别报告。）