Javascript contenteditable div上的keyup事件

在按下

Enter

后，我试图在contenteditable div中格式化文本。问题是没有任何密钥注册，因此这是不可能的。其他事件，如“click”确实有效，如果我将元素更改为“document”（

document.addEventListener（）

…），这也会使它有效，但这是一个极端的解决方案。有简单的解决办法吗

window.addEventListener（'load'，function（）{
var editbox=document.getElementById（“可编辑”）
editbox.addEventListener（'keyup'，函数（e）{
警报（“应该出现”）；
});
});

文本

您应该使用
contenteditable=“true”
它有一个特殊的事件叫做
input
几乎在所有情况下都不需要
document.getElementById
。几乎每个id为
id
的元素都有自己的变量

window.addEventListener（'load'，function（）{
让enterCount=0；
可编辑。addEventListener（'input'，函数（e）{
console.log（“应该出现”）；
if（enterCount

标题
文本
您没有将侦听器附加到正确的元素


window.addEventListener（'load'，function（）{
var editbox=document.getElementById（“elm_可编辑”）
editbox.addEventListener（'keyup'，（e）=>{
//下面是如何检测回车键
如果（13==e.keyCode）{
警报（“应该出现”）；
}        
});
});

文本
使用
keyCode
event.key
来检测特定的键“Enter”=Enter。
使用
event.target
属性准确检测键入的元素。
#editable
div位于
main
中，它是
contenteditable
，因此无法通过正常方式访问它，因此以
main
为目标

要测试演示，请执行以下操作：

将光标放置在蓝色轮廓区域内
按回车键
控制台应记录每个按下的ENTER键
现在单击轮廓区域下方，然后按ENTER键
keyup事件被忽略，没有任何记录
演示

document.addEventListener（'keyup'，函数（e）{
如果（e.key=='Enter'&&e.target.tagName==='MAIN'）{
console.log（'ENTER'）；
}
});
#可编辑{
颜色：红色
}

标题
文本
还有另一种解决方案。您可以检测输入类型


const-divInput=document.getElementById（'divInput'）；
const textarea=document.getElementById（'inputTypePreview'）；
divInput.addEventListener（'输入'，（事件）=>{
const t=event.inputType；
textarea.innerHTML=`${t}\n`；
如果（t=='insertparation'| | t=='insertLineBreak'）
textarea.innerHTML='输入检测到的\n'；
});
#输入类型预览{
利润率：1米0；
}
#divInput，#输入类型预览{
边框：1px实心#b1b0b0；
边界半径：3px；
宽度：100%；
调整大小：无；
}

来自问题文本：“如果我将元素更改为‘document’（document.addEventListener（）…），这也会使它工作，但这是一个极端的解决方案”@qiAlex它根本不是一个极端的解决方案。如果遵循我的模式，则可以包括其他元素，而排除其他元素。它叫。但是OP认为应该避免将事件注册到文档，这并不重要，因为事件冒泡文档将始终是事件链的一部分我知道，这不是一个极端的解决方案，我只是想指出，问题的作者已经想到了解决方案，事件链上的
document
和
main
之间几乎没有什么区别。结果仍然将
main
隔离为
event.target
，而不确认其他元素。我可以添加
e.stopPropagation（）
，但对于一个简单的问题来说，这可能有点过头了。keyCode不推荐使用，您应该使用
e.key==“Enter”
。keyCode不推荐使用，您应该使用
e.key==“Enter”
。将事件更改为
input
不会告诉我按下了哪个键。你为什么坚持这样做？标记contenteditable标记确实解决了我的问题。但是，我在答案中更新了一个代码，我们可以简单地计算
br
孩子的数量。听
keyup
要容易得多，所以我不明白你为什么坚持这么复杂的解决方案？