防止文本选择退出div

时间:2013-08-23 04:06:30

标签: javascript jquery html css

我有一个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浏览器默认值。

3 个答案:

答案 0 :(得分:4)

你可以用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();
}

答案 1 :(得分:1)

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

Here is a stackOverflow about copying to clipboard.

最好的解释是here.

答案 2 :(得分: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>