Question

我在<pre><code>中有一些源代码，其中行号在单独的<div>中。选择文本后，行号随附，然后复制。有没有办法阻止行号成为选择的一部分，即使我选择源代码块上方和下方的元素？

我希望避免使用JavaScript，以免受浏览者的利益。（使用JavaScript，我会添加一个按钮来隐藏行号。）

unselectable="on"以及各种特定于供应商的user-select CSS属性不起作用;这些数字仍然被选中和复制。

Answer 1

提供您想要的元素以防止选择ID。

然后把它放在你的CSS中：

#id-name {
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -khtml-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
}
::-moz-selection {
   background: transparent;
}
::selection { 
   background: transparent; 
}

Answer 2

var inp = document.getElementById('my_input');

inp.addEventListener('select', function() {
  this.selectionStart = this.selectionEnd;
}, false);
<input id="my_input" type="text" value="Try to select me!" />

防止元素参与文本选择

2 个答案: