Question

我有一个div，显示一些用户可能想要突出显示以复制和粘贴的文本等。虽然踢了那个设计的轮胎，但我注意到只需将鼠标拖得太远就很容易选择超出div的内容。我希望通过阻止选择离开相关的div来避免此问题，但我无法找到任何方法来执行此操作。

一种可能的解决方案可能是应用user-select:none（如here所述），但特定div，但在这种情况下不会有效，因为还有其他div需要有可选文本的。

可以想象，jQuery可用于更改div样式，以便user-select:none适用于除div之外的所有内容，但我觉得必须有更简单的方法，甚至只用CSS。

任何人都知道怎么做？

编辑：Josh C的答案可以解决问题。 Here是他的解决方案的JS小提琴，叉子中最重要的变化是向disabled="disabled"添加了textarea属性。在使用该属性时在textarea内选择文字时，文本中不会显示插入符号，当焦点位于textarea时，轮廓不会发光。唯一需要注意的是，如果您想掩盖文本位于textarea的事实，则必须控制textarea浏览器默认值。

Answer 1

你可以用jQuery实现这一点，但是，我所知道的最简单，最轻量级的选择就是像Google这样的公司一直在做的事情：

将要突出显示的文本放在输入或文本区域框中。

<强> Demo here

<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();
}

Answer 2

好像您可能希望能够点击此div并将其文本内容复制到剪贴板。

Here is a stackOverflow about copying to clipboard.

最好的解释是here.

Answer 3

我只想在此处添加我的代码段。我的重点是确保我可以显示标题和段落文本，而文本区域样式没有渗透。我也更喜欢使用属性选择器来实现这种css tom-foolery。

[selectable-text]{
    padding: 0;
    width:100%;
    border: none;
    resize:none;
    background:none;
    font-size:inherit;
    font-family:inherit;
    font-weight:inherit;
    color: inherit;
}

<h1>
  <textarea  selectable-text disabled="disabled" rows=1 >Soldering Iron 110v</textarea>
  </h1>
<p>
<textarea  selectable-text disabled="disabled" rows=1 >This is a fine soldering iron.</textarea>
</p>
<h1>Soldering Iron 110v</h1>
<p>This is a fine soldering iron.</p>

防止文本选择退出div

3 个答案: