突出显示嵌套div的内部html

时间:2016-05-19 17:36:19

标签: javascript html

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

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

寻找JavaScript解决方案。

谢谢!

1 个答案:

答案 0 :(得分:0)

我会建立这个答案:https://stackoverflow.com/a/4183448/3362735并添加onclick事件或将事件处理程序附加到元素。

&#13;
&#13;
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();
  }
}
&#13;
<div id="my-id" onclick="selectElement(this)">
  <div>1 Main St</div>
  <div>Anytown, KY</div>
</div>
&#13;
&#13;
&#13;