javascript - 子元素无法集中注意力

Question

我想在游标位置动态插入childnode并设置焦点

var range = window.getSelection().getRangeAt(0);
var selectionContents = range.extractContents();
var span = document.createElement("span");
span.id= 'ttt';
span.style.color = "red";
span.appendChild(selectionContents);
span.innerText = 'dfdf';
range.insertNode(span);

我可以设置节点焦点，但chileNode不能

dom.focus();//OK
dom.lastElementChild.focus();//can't  

log lastElementChild我可以看到span和id =＆＃39; ttt＆＃39; .....

Answer 1

使用window.location.hash = '#ttt';

这将滚动到元素

Answer 2

正如我已经评论过的那样，span没有焦点事件。以下是SO Post - Which HTML elements can receive focus?供参考。

要回答您的问题，您可以尝试添加具有readonly属性的文本框，并添加适当的css以将其模仿为标签。

Fiddle

编辑1

我在:focus添加了css。你应该创建一个类并切换这个类。

代码

＆＃13;

＆＃13;

function focusDiv() {
  document.getElementById("divTT").focus();
}

function focusSpan() {
  document.getElementById("lblTT").focus();
}

function focusText() {
  document.getElementById("txtTT").focus();
}

＆＃13;

div:focus{
  background:blue;
}
span:focus{
  background:blue;
}
input:focus{
  background:blue;
  font-size:20px;
  font-family:Gorgia;
  color:#eee;
}

.label{
  border:0px;
}

＆＃13;

<div id="test">Test
  <br/>
  <span id="lblTT">Span</span>
  <br/>
  <div id="divTT">Div</div>
  <input type="text" id="txtTT" class="label" value="Text" readonly>
</div>
<button onclick="focusSpan()">Focus Span</button>
<button onclick="focusDiv()">Focus Div</button>
<button onclick="focusText()">Focus Text</button>

＆＃13;

＆＃13;

＆＃13;