为什么 contentEditable=true div 在通过选项卡聚焦时不接受文本输入？答案

【问题标题】：Why does a contentEditable=true div doesn't accept textual input when focused via tabs?为什么 contentEditable=true div 在通过选项卡聚焦时不接受文本输入？
【发布时间】：2019-08-18 12:26:47
【问题描述】：

为了可视化我的问题，我创建了以下 html 结构：

父亲的div
一个儿童 div

两者具有相同的属性：contenteditable="true" tabindex="0"。

main.html:

<html>
<div>
    <div contenteditable="true" tabindex="0">
        firstDivText
        <div contenteditable="true" tabindex="0">
            secondDivText
        </div>
    </div>
</div>
</html>

问题：

仅使用选项卡导航（tabindex 为 0，因此允许），我可以毫无问题地导航到父亲和孩子。

当焦点（来自标签）在 father 元素上时，我可以立即开始输入来修改其上下文（contentEditable true）。

但是当焦点在 child 元素上时，我必须先点击它才能修改文本！

问题：

为什么会这样？
如何解决此问题，以便当前处于焦点的哪个元素“接收”击键？

不想避免使用 contentEditable 也不想使用 jquery :S

【问题讨论】：

Focusing on nested contenteditable element的可能重复

标签： html

【解决方案1】：

您最好使用输入并避免内容可编辑，您可以将其样式设置为看起来相同。

.myInput{
    background:rgba(0,0,0,0);
    border:none;
}

编辑：如果你真的必须，你可以在焦点上触发点击事件

$(".Mycontenteditable").focus(function(){
  $(this).click();
});

【讨论】：

嗨，我讨厌 jQuery，哈哈，我必须将 contentEditable 用于主项目的其他部分：S 有没有可能你知道另一种方法不是解决方法？
不是真的，虽然它在这里工作codepen.io/TrentWalton/pen/avWVPr
是的，是嵌套搞砸了。我正在寻找一个简短的 idomatic 解决方案