为了可视化我的问题，我创建了以下 html 结构：
- 父亲迪夫
- 儿童部
两者都具有相同的属性：contenteditable="true" tabindex="0"。
主.html：
<html>
<div>
<div contenteditable="true" tabindex="0">
firstDivText
<div contenteditable="true" tabindex="0">
secondDivText
</div>
</div>
</div>
</html>
问题：
仅使用选项卡导航(tabindex 为 0，因此允许(，我可以毫无问题地导航到父亲和孩子。
当焦点(从选项卡给出(位于父元素上时，我可以立即开始键入以修改其上下文(contentEditable true(。
但是当焦点在子元素上时，我必须先单击它，然后才能修改文本！
问题：
- 为什么会这样？
- 如何修复它，以便当前处于焦点上的元素将"接收"击键？
不想避免使用contentEditable，也不想使用jquery ：S
您最好使用输入并避免内容可编辑，您可以将其样式设置为看起来相同。
.myInput{
background:rgba(0,0,0,0);
border:none;
}
编辑： 如果你真的必须，你可以在焦点上触发点击事件
$(".Mycontenteditable").focus(function(){
$(this).click();
});