我有一个div显示一些文本，用户可能希望突出显示这些文本以进行复制和粘贴等。在尝试该设计的过程中，我注意到div仅通过将鼠标拖得太远就很容易最终选择超出此范围的内容。我想通过防止选择内容离开相关内容来避免此问题div，但是我找不到任何方法。
一种可能的解决方案可能是在特定位置之外user-select:none（如此处所述）将其应用到其他所有位置div，但在这种情况下将不起作用，因为还有其他div一些需要具有可选文本的。
可以想象，可以使用jQuery来更改div样式，使其user-select:none适用于所有内容，但div您要在其中选择文本，但我觉得必须有一种更简单的方法来解决它，甚至可能只有CSS。
有人知道怎么做吗？
编辑：Josh C的答案如下。这是他的解决方案的JS小提琴分叉，最重要的更改是在上添加了disabled="disabled"属性textarea。当在使用textareawhile属性的情况下选择文本时，文本中不会出现尖号，并且当焦点位于时轮廓不会发光textarea。唯一需要注意的另一件事是，textarea如果您想掩盖文本位于中的事实，则必须控制浏览器的默认值textarea。
您可以使用jQuery来实现这一点，但是，我所知道的最简单，最轻巧的选择就是做像Google这样的公司一直做的事情：
将要突出显示的文本放在输入或文本区域框中。
<textarea>Text that will be highlighted here..</textarea>
如果您希望将其隐藏起来，请设置 border:none;
textarea {
border:none;
width:400px
resize:none;
}
如果您想嵌入Google，Youtube视频或Facebook Feed中的地图，则所有这些公司都使用这种方法。我很确定这是您最好的选择。
如果您希望在单击时自动选择文本，请使用一些JS，例如：
function SelectAll(id) {
document.getElementById(id).focus();
document.getElementById(id).select();
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句