时间戳

首页 > 解决方案 > 为什么 contentEditable=true div 在通过选项卡聚焦时不接受文本输入？

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

问题描述

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

  1. 父亲 div
  2. 一个儿童 div

两者都具有相同的属性：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）。

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

问题：

  1. 为什么会这样？
  2. 我该如何修复它，以便当前焦点所在的元素将“接收”击键？

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

标签： html

解决方案

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

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

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

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

推荐阅读