突出显示嵌套 div 的内部 html [关闭]

Posted 2023-03-06

【中文标题】突出显示嵌套 div 的内部 html [关闭]

【英文标题】：highlight inner html of nested divs [closed]

【发布时间】：2016-09-16 18:08:56

【问题描述】：

我正在显示如下地址。我希望用户能够单击地址的任何部分并突出显示两个嵌套 div 的内部 html，以便他们可以复制到剪贴板。这与简单地按住鼠标左键并将光标从地址的开头拖动到结尾的结果相同。

<div id="my-id">
  <div >1 Main St</div>
  <div >Anytown, KY</div>
</div>

正在寻找 javascript 解决方案。

谢谢！

【问题讨论】：

Selecting text in an element (akin to highlighting with your mouse)的可能重复

【参考方案1】：

我会以这个答案为基础：https://***.com/a/4183448/3362735 并添加一个 onclick 事件或将一个事件处理程序附加到元素。

function selectElement(el) 
  if (window.getSelection && document.createRange) 
    var sel = window.getSelection();
    var range = document.createRange();
    range.selectNodeContents(el);
    sel.removeAllRanges();
    sel.addRange(range);
   else if (document.selection && document.body.createTextRange) 
    var textRange = document.body.createTextRange();
    textRange.moveToElementText(el);
    textRange.select();
  

<div id="my-id" onclick="selectElement(this)">
  <div>1 Main St</div>
  <div>Anytown, KY</div>
</div>