在更改之前获取contenteditable元素的textContent（或`beforeinput`）

Question

我有<ol contenteditable=true>元素，我想添加一个eventListener，以便在任何<li>这些列表中的任何更改之前，原始textContent （即任何更改之前的文本）被推送到var alterations = [] 。

我尝试过使用addEventListener("beforeinput", ... ，如下所示：

 window.alterations = []; window.onload = () => { document.getElementById('main').addEventListener("beforeinput", () => { alert('event listened!'); window.alterations.push(window.getSelection().anchorNode.parentElement.textContent); console.log(window.alterations); }); }

 <body> <section id="main"> <ol contenteditable="true"> <li>First</li> <li>Second</li> <li>Third</li> <li>Fourth</li> </ol> <ol contenteditable="true"> <li>First</li> <li>Second</li> <li>Third</li> <li>Fourth</li> </ol> </section> </body>

但是beforeinput似乎不适用于contenteditable元素（如上面的代码所示，回调函数没有执行）。 只有input事件作为addEventListener参数，但是为时已晚，因为已经从原始文本输入或删除了一个字母。

问题：如何通过contenteditable获取要更改的元素的原始文本？ 例如，如果我输入“First” <li>其他内容，例如“not First”，如何将<li>的原始textContent （===只是“First”）推送到alterations数组？

编辑：我认为这是一个浏览器问题。 beforeinput适用于基于Chromium的浏览器，但不适用于基于Firefox的浏览器（如Firefox和PaleMoon）。 我的quickfix是使用keydown而不是beforeinput 。 此代码适用于所有浏览器：

 for (let x of document.querySelectorAll('[contenteditable="true"]')) {
   x.addEventListener('keydown',() => {
     let originalText = window.getSelection().anchorNode.textContent; 
     console.log(originalText);
   });

但是每次按下任何键时都会触发这个不幸的问题，比如Ctrl + Shift或Alt 。 我尝试过keypress而不是keydown ，但我的基于Chromium的浏览器没有触发删除，按下任何“上移/下移/左/右/”按键也会触发代码。 我想我可以用charcode处理这些异常，但除了使用keydown之外别无他法吗？

Answer 1

好的，这应该工作：

 window.alterations = []; window.onload = () => { document.getElementById('main').addEventListener("keydown", (event) => { //0 == delete in PaleMoon, 46 == delete in other browsers /* ALT is needed for some characters, like § and º, but to exclude ALT, META, etc.: if (event.altKey || event.metaKey) {return;} */ if (event.key.length === 1 || ["Enter", "Delete", "Backspace"].includes(event.key)) { //when Ctrl is pressed, trigger only if Ctrl+V or Ctrl+X and ALT is not pressed: if (event.key.toLowerCase() !== 'v' && event.key.toLowerCase() !== 'x' && event.ctrlKey && !event.altKey) {return;} alert('event listened!'); window.alterations.push(window.getSelection().anchorNode.parentElement.textContent); console.log(window.alterations); } }); }

 <body> <section id="main"> <ol contenteditable="true"> <li>First</li> <li>Second</li> <li>Third</li> <li>Fourth</li> </ol> <ol contenteditable="true"> <li>First</li> <li>Second</li> <li>Third</li> <li>Fourth</li> </ol> </section> </body>

这似乎在兼容性方面是最好的，因为我开始认为每个浏览器对beforeinput有不同的响应（并且可能没有处理程序的keydown ）。 我下载了一个基于Chromium的浏览器来测试它，结果与Chrome不同。

编辑：我为event.key替换了event.which ，因为前者已被弃用，并且在不同的浏览器中不可靠。

剩下的问题：

如果用户重复类型~~~或´´´´等等，这将不会被处理。
~~如果用户复制文本（ Ctrl + C ），或者在<li>聚焦时使用另一个类似的快捷方式，则会不情愿地触发事件，因为它会听取c 。~~ [感谢@trysis评论]

在更改之前获取contenteditable元素的textContent（或`beforeinput`）

问题描述

1 个解决方案

解决方案1
1 2018-03-14 12:38:49

在更改之前获取contenteditable元素的textContent（或`beforeinput`）

问题描述

1 个解决方案

解决方案1 1 2018-03-14 12:38:49

解决方案1
1 2018-03-14 12:38:49