自动选择超链接的显示文本

Question

如何在悬停时自动select显示超链接的文本？

let aryAnchors = [... document.getElementsByTagName("a")];
for(a of aryAnchors)
{
    a.addEventListener("mouseover",function()
    {
        // What goes here?
    });
}

或者，如果能在CSS3完成，那就更好了。

一些背景知识（如果你愿意）：

我有一个页面，用户经常想通过突出显示它并按 control-C 将显示的超链接文本复制到剪贴板（但他们还设置了其他快捷键来执行其他操作 select编辑文本而不只是将其复制到剪贴板）。

在超链接周围手动突出显示（不单击它，或者不在 selection 的两端复制白色-space）很麻烦。

在不使用浏览器扩展的情况下，我希望超链接的显示文本在悬停时变为 selected，这样用户所要做的就是将鼠标悬停在超链接上，然后按 ctrl-C（如一个例子）。

Answer 1

不是 CSS。这里需要JavaScript。

使用range界面的selectNodeContents设置节点内容为范围。然后将其添加到 selection 对象中。

这是一个粗略的演示片段:

function select(elem) {
  var range, selection;    
  selection = window.getSelection(); 
  range = document.createRange();
  range.selectNodeContents(elem);
  selection.removeAllRanges();
  selection.addRange(range);
}
function deselect() {
  var selection = window.getSelection(); 
  selection.removeAllRanges();
}

document.addEventListener('mouseover', textselection);
document.addEventListener('mouseout', textdeselection);

function textselection(e) {
  if (e.target.tagName === 'A') { select(e.target); }
}
function textdeselection(e) {
  if (e.target.tagName === 'A') { deselect(); }
}

* { box-sizing: border-box; padding:0; margin: 0; font-family: sans-serif;  }
a { margin: 8px; }
p, ul, hr { margin: 8px; }

<p>Below is a list of links which you can select by hovering over. You need to first focus the page by clicking anywhere on the document.</p>
<div>
  <a href="#">Link one</a>
  <a href="#">Link two</a>
  <a href="#">Link three</a>
</div>
<hr>
<p>Below is a list which you cannot select by hovering over.</p>
<ul><li>List Item 1</li><li>List Item 2</li><li>List Item 3</li></ul>

还有一个fiddle：https://jsfiddle.net/abhitalks/826qh1fn/

自动选择超链接的显示文本

Auto-Selecting the Displayed Text of a Hyperlink

javascript

css

anchor

textselection

ecmascript-6