<代码>DIV{边框：3px纯黑色；}跨度{边框：2px纯蓝色；}

<代码><；DIV ContentEditable>；<；SPAN ContentEditable ID=“ HAHA ”>；<；I>；ASD<；/I>；<；/SPAN&>；<；/DIV>；

我想关注div { border: 3px solid black; } span { border: 2px solid blue; }，但只有当我将元素移到div

<代码>DIV{边框：3px纯黑色；}跨度{边框：2px纯蓝色；}

<代码><；DIV ContentEditable>；<；/DIV>；<；SPAN ContentEditable ID=“ HAHA ”>；<；I>；ASD<；/I>；<；/SPAN&>；

目前使用这段代码作为焦点，如果有一种方法可以关注span元素，即使它在DIV中？

<div contenteditable>
  <span contenteditable id="haha"><i>asd</i></span>
</div>

顺晟科技：

尝试设置<div contenteditable> </div> <span contenteditable id="haha"><i>asd</i></span>。它允许通常不可聚焦

document.querySelector(`#haha`).focus();

<代码>DIV{边框：3px纯黑色；}跨度{边框：2px纯蓝色；}范围：焦点{边框颜色：绿色；}

<代码><；DIV ContentEditable>；<；SPAN tabindex=“ 0 ” contentEditable ID=“ haha ”>；<；I>；ASD<；/I>；<；/SPAN&>；<；/DIV>；

您需要在document.getElementById("haha")中添加一些文本。然后他们每个人都有自己的内容来编辑。

myFunction = function() {

  let x = document.getElementById("haha");
  x.setAttribute('tabindex', '0');
  x.focus();
}

myFunction();

<代码><；DIV ContentEditable>；DIV<；SPAN ContentEditable ID=“ haha ”>；SPAN<；/SPAN>；<；/DIV>；

尝试#haha（注意我删除了“#”）

文档方法getElementById（）返回一个Element对象表示其ID属性与指定的串。由于元素ID在指定时必须是唯一的，它们是快速访问特定元素的有用方法。

来源

编辑：

看起来操作tabIndex可以让它工作：

div {
  border: 3px solid black;
}

span {
  border: 2px solid blue;
}

<代码><；DIV ContentEditable>；<；span contteditable=“ true ” ID=“ haha ”>；ASD<；/span>；<；/DIV>；<；button类=“ bold ”>；bold<；/button>；<；DIV contentEditable=“ true ”>；管他呢<；/DIV>；<；button类=“ bold ”>；bold<；/button>；