user-select 用户禁止选中

旧城冷巷雨未停 提交于 2019-12-10 17:28:07

  我们在页面输入的文本按理来说应该都是可以选中的,但是如何才能让显示出来的文本或是图片不被选中呢,这时候就需要用到 user-select 属性。

user-select

user-select (CSS属性),控制着用户能否选中文本。除了在文本框中,在 Chrome浏览器中对已经加载的文本没有影响。

一、语法:

user-select:none / text / all / element / auto

user-select 属性的默认值为 text,没有继承性,适用于替换元素外的所有元素。

 

二、属性值:

  none:文本不能被选中。注意这个 Selection 对象包含这些元素。从 Firefox21 开始,none表现的想 -moz-none,因此可以使用 -moz-user-select :text 在子元素上重新启用选择。

  text:默认值,可以选中文本

  all:当所有内容可以作为一个整体被选择。(如果双击或是在上下文上点击子元素,那么包含该元素的子元素也将被选中。)

  element:可以选择文本,但是选择范围受元素边界的约束

  auto:auto的计算值确定如下:

  • 在::before 和 ::after 伪元素上,计算的属性是 none
  • 如果元素是可编辑元素,则计算值是 contain
  • 否则,如果此元素的父元素的 user-select 的计算值为 all,则计算值为 all
  • 否则,如果此元素的父级上的 user-select 的计算值为 none,则计算值为 none
  • 否则,计算值则为 text

注:Selection对象表示用户选择的文本范围或插入符号的当前位置。它代表页面中的文本选区,可能横跨多个元素。文本选区由用户拖拽鼠标经过文字而产生。

 注意:在不同浏览器之间实现的一个区别是继承。 在Firefox中,-moz-user-select不会被绝对定位的元素继承,但在Safari和Chrome中,-webkit-user-select由这些元素继承。

 

三、设置或检索是否允许用户选中文本

  IE6-9不支持该属性,但是支持使用标签属性 onselecstart = 'return false;' 来达到 user-select: none 的效果。Safari 和 Chrome 也支持该标签属性。

  直到Opera12.5 仍然不支持该属性,但是和 IE6-9一样,也支持私有的标签属性 unselectable = 'on' 来达到 user-selector:none 的效果;unselectable 的另外一个值是 off;

  除了 Chrome 和 Safari外,和在其他浏览器中,如果将文本设置为 -ms-user-select:none; 则用户将无法在该文本块中开始选择文本。不过,如果用户在页面的其他区域开始选择文本,则用户仍然可以继续选择将文本设置为 -ms-user-select:none; 的区域文本。

 

四、浏览器兼容性:

 

红色:no supported (不支持)

绿色:supported (支持)

绿色有黄色标识:supported width prefix (支持但需要前缀)

 

五、实例:

HTML

<p>你应该可以选中这段文本。</p>
<p class="unselectable">你不能选中这段文本!</p>

CSS

.unselectable {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

 


 

参考资料:

https://developer.mozilla.org/zh-CN/docs/Web/CSS/user-select 

https://www.html.cn/book/css/properties/user-interface/user-select.htm#a3

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!