Question

我有一个div，其innerHTML是动态更新的（想象它就像一个聊天室，每个新消息附加一个新的段落）。

问题是，现在用户无法选择/突出显示文本，因为每次更新div时都会更改选择。有时它会被清除，有时它会选择整个div。

通过此代码段最佳说明：

function modify(){
  document.getElementById('panel').innerHTML += "<p>Another message.  Try to highlight me.</p>";
}

setInterval(modify, 500);

.highlightable {  
  -webkit-user-select: text;
  -moz-user-select: text;  
  user-select: text;            
}

<div id='panel' class='highlightable'>
  
</div>

我尝试过添加css user-select：text但没有运气。有什么想法吗？

Answer 1

问题

每次操作相同的innerHTML，每次调用modify()都会重写 panel的内容。您突出显示的项目将被删除并重新创建，从而失去其突出显示的原因。

解决方案

更好的方法是为每次迭代创建一个新元素，而将它添加到面板中。使用此方法，您不必担心重写现有内容，因此您的重点将保留。

function modify(){
  var panel = document.getElementById('panel');

  //Create a new <p> element
  var newP = document.createElement('p');

  //Set its content
  newP.innerHTML = 'Another message.  Try to highlight me.';

  //Add it to panel
  panel.appendChild(newP);
}

setInterval(modify, 500);

.highlightable {  
  -webkit-user-select: text;
  -moz-user-select: text;  
  user-select: text;            
}

<div id='panel' class='highlightable'>
  
</div>

无法在动态div中选择/突出显示文本

1 个答案: