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