contentEditable是一个HTML属性（由Microsoft发明并在HTML5中标准化），用于客户端浏览器内“富文本”编辑。
我有一个内容可编辑的 div，该 div 有一些内容： Lorem ipsum dolor sit ... 我有一个div是contenteditable并且那个div有一些内容： <div contenteditable="true" id="editable-div"> <p id="paragraph"> Lorem <em>ipsum</em> dolor sit <strong id="stong-el">amet</strong> <p> </div> 我想拦截keydown事件并找到用户试图写入的元素。 听content editable div时已经找不到具体元素了： const div = document.getElementById('editable-div'); div.addEventListener('keydown', event => { /* ??? */ }, false); 问题：回调中的事件并没有告诉我写入了哪个元素，它只告诉我我已经写入了#editable-div 我的另一个尝试是监听嵌套事件，像这样： // either const el = document.getElementById('paragraph'); // or const el = document.getElementById('stong-el'); el.addEventListener('keydown', event => { /* ??? */ }, false); 问题是事件永远不会触发。显然，该事件仅在具有 contenteditable 属性的元素上触发，这很糟糕。 我最后的办法是听#editable-div并检查哪个元素有文本选择，但如果有任何其他方式我宁愿不这样做。 更新 我发现的另一种方法是在可编辑元素上使用MutationObserver，像这样： const observer = new MutationObserver(mutations => { mutations.forEach(function(mutation) { console.log(mutation.target); }); }); const config = { characterData: true, subtree: true }; const div = document.getElementById('editable-div'); observer.observe(div, config); 这记录了我编辑的文本元素。 我不确定我的问题是否得到了回答，因为最后我想做两件事： 捕获并阻止更新内部数据结构的事件 从数据结构中渲染 React 组件 这似乎不是一个合适的解决方案。 您可以将 keydown 事件附加到文档的正文中。然后在 keydown 事件上，使用 document.activeElement 返回当前具有焦点并将接收键盘输入的元素。 这里是解释 document.activeElement 的链接（https://developer.mozilla.org/en-US/docs/Web/API/Document/activeElement） 您可以将侦听器放在 contenteditable 元素上，然后通过比较其新文本与旧文本来检查更新了哪个元素。并且取决于您可以在相应的分支中执行您的操作。 检查这个代码块- <div id="ce" contenteditable="true"> <strong id="s">Abc</strong><br/> <i id="i">Hello</i> </div> <script> oldstext = document.getElementById('s').textContent; olditext = document.getElementById('i').textContent; document.getElementById('ce').addEventListener('keydown', event => { //alert("ce Edited"); if(oldstext != document.getElementById('s').textContent){ console.log(oldstext + " v/s " + document.getElementById('s').textContent); oldstext = document.getElementById('s').textContent; } else if (olditext != document.getElementById('i').textContent){ console.log(olditext + " v/s " + document.getElementById('i').textContent); olditext = document.getElementById('i').textContent; } }, false); </script> 您可以查看当前文本选择的anchorNode来获取发生keydown事件的DOM节点： const div = document.getElementById('editable-div'); div.addEventListener('keydown', event => { console.log(window.getSelection()?.anchorNode); }, false); https://developer.mozilla.org/en-US/docs/Web/API/Window/getSelection
我有一个按钮元素，它需要有可以动态修改的文本。我在添加空格时遇到了麻烦，当时我引用这个答案有一个跨度，这是 contentedit ...
我在下面有可编辑的内容和一个 onbeforeinput 事件侦听器和函数。使用 lit.js 我想在到达 dom 之前获取段落或 h1 元素。所以我可以得到它的高度和宽度...
是否可以在将 contentEditable 属性设置为 true 的元素上禁用拖放功能。我有以下HTML页面。
我需要以编程方式模拟用户输入到一个内容丰富的HTML元素中的交互。我不能使用诸如 element.onkeypress()或 element.fire()之类的东西。我不能修改...
在链接内的可内容块，如何防止重定向，但让文本选择的位置发生变化？
这里是演示：http:/jsfiddle.netqh7Sq我想能够编辑span里面的链接，其实我可以通过部分防止冒泡传播的块状小节变化的动作。请不要建议...
感觉自己快疯了--似乎过不了这个坎。输入任何文本后，我们立即失去焦点。调用ref上的focus()似乎完全没有效果。UpdatePage.js导出...
使用contentEditable div而不是textarea的缺点是什么？
如果我用一个属性为contenteEditable="true "的div作为文本字段而不是textarea，会不会给自己带来麻烦？
div contentEditable与非contentEditable子代不能删除。
我对可满足的行为感到非常困惑，因为有时是工作，有时不是。在这个例子中是不工作的。当我删除所有的工作.textarea{ min-height: 100px; } ... ...
codeBlock包裹在<pre>中，在按下Enter键时，在可内容的断点处。
在我的自定义编辑器中，将代码封装在了
我使用一个内容可编辑的元素。这是可编辑的。 和document.getElementById('myinput').innerHTML来读取它的内容。
Javascript: Span contentEditable as input (Placeholder Alternative)
我需要当用户删除(span id "ps")中的内容时，显示span id "lps_inner"。作为输入占位符的替代，我需要使用javascript来实现这一点。...
我很惊讶我遇到了麻烦，无法找到答案。我正在尝试从contenteditable的开始到用户的光标/插入符号使contenteditable中的文本。这是一个...
光标位置不在Microsoft Edge的cotenedit div中占位符的开头
可压缩div上的光标不是占位符的开始，但是它在chrome和firefox中可以正常工作。 div是自动聚焦的，光标必须从初始显示。 html
我想使照片标题可编辑，然后将更改保存在本地存储中。它适用于第一张照片，但是当我要编辑另一张照片时，所做的更改将保存到该第一张照片，而不是一个......>
我正在尝试建立一个画廊，每张照片的下面都是它的标题，我想使它们可编辑。我尝试只是将其打包到div并设置contenteditable = true，但它不起作用，什么也没有发生...
我已使锚元素可编辑。在Firefox上，我无法将插入符号放置在特定区域。我只能将插入符号转到文本的开头或结尾。举个例子;为文本...
长话短说：我有一个内容可编辑的div，可在其中以mm / dd / yyyy格式输入日期。我知道有输入类型，但是我确实需要contenteditable div，所以请不要建议我...
contentEditable div中的跨度标签需要按键事件
我的html代码中包含以下div： 我正在使用contentEditable div作为制作自动...的简单跨浏览器方法。] >> [[< [ 除非我没有记错，否则应该可以解决您的问题： initHighlighted = function() { $(".highlighted").live("keypress",function() { alert("It works!"); }); }; 因为您的跨度是在DOM的初始加载后添加的，所以没有附加keypress事件侦听器，因为没有东西可以附加它们。 jQuery的live通过将这些侦听器附加到这种情况下为您进行分类，在这种情况下，无论何时将这些侦听器添加到DOM中，都将其突出显示。 阅读Jquery站点上的文档以得到比我能给您的更好的解释：http://api.jquery.com/live/ 编辑：我很抱歉未能正确阅读您的问题，并意识到在添加“突出显示”的跨度之后，您正在附加按键监听器。 虽然您读过这篇文章： Keyboard events for child elements in a contenteditable div?
您如何使用Capybara来测试具有contenteditable =“ true”的元素？使用此规范...方案“使用有效输入”使用“ Zinn”单击“名称”，使用以下命令填充“名称”：“ Update” Expect（page）.to ...