3

我有一个div显示一些用户可能想要突出显示以复制和粘贴等的文本。在尝试该设计时，我注意到很容易div通过将鼠标拖得太远而最终选择超出此范围的内容。我想通过阻止选择离开相关来避免这个问题div，但我无法找到任何方法来做到这一点。

一种可能的解决方案可能是在除那个特定之外的任何地方应用（如此处user-select:none所述） ，但这在这种情况下不起作用，因为还有其他需要具有可选文本的 s。divdiv

可以想象 jQuery 可用于更改div样式，以便user-select:none适用于除div您选择文本之外的所有内容，但我觉得必须有一种更简单的方法来处理它，甚至可能只使用 CSS。

有人知道怎么做吗？

编辑： Josh C 在下面的回答可以解决问题。这是他的解决方案的 JS fiddle 分支，分支中最重要的变化是disabled="disabled"在textarea. 在使用该属性的同时选择文本时，文本中textarea不会出现插入符号，并且当焦点位于textarea. 唯一需要注意的另一件事是，textarea如果您想掩盖文本位于textarea.

4

3 回答 3

4

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

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

演示在这里

<textarea>Text that will be highlighted here..</textarea>

如果你想让它有点隐藏，设置border:none;

textarea {
    border:none;
    width:400px
    resize:none;
}

如果您想嵌入来自 Google、Youtube 视频或 Facebook 订阅源的地图，所有这些公司都使用这种方法。我很确定这是你最好的选择。

如果您希望在单击时自动选择文本，请使用一些 JS，例如：

function SelectAll(id) {
  document.getElementById(id).focus();
  document.getElementById(id).select();
}
于 2013-08-23T04:27:01.193 回答
1

似乎您可能希望能够单击div它并将其文本内容复制到剪贴板。

这是一个关于复制到剪贴板的stackOverflow。

最好的解释在这里。

于 2013-08-23T04:21:07.330 回答
0

我只是想在这里包含我的片段。我的重点是确保我可以显示标题和段落文本，而不会使文本区域样式渗出。我也更喜欢将属性选择器用于这种 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>

于 2017-09-04T17:21:03.047 回答