禁止用户选定文本: user-select

双击文本 select,会被选定,如下

但有时点击元素时不想要被选定的状态,有一个尚未成为标准的 CSS 属性: user-select,它有 4 个值:

  1. text 可以选择文本
  2. element 可以选择文本,但选择范围受元素边界的约束。
  3. none 不可以选择文本。
  4. auto 如果该元素包含可编辑的文本(如输入元素或可编辑内容的元素),则可以选择文本。否则,元素内容是否可选择由父节点的值决定。

目前Firefox/Chrome/IE10+已经支持了,但需要加前缀

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

 

比如如下文本双击不会被选定

您选定不了我,您选定不了我,您选定不了我,您选定不了我

 

兼容性:目前除了IE10-,其它浏览器都支持。

 

相关:

https://developer.mozilla.org/en-US/docs/Web/CSS/user-select

http://www.w3.org/TR/2000/WD-css3-userint-20000216#user-select

http://blogs.msdn.com/b/ie_cn/archive/2012/01/17/css-user-select.aspx

posted on 2015-07-24 11:21  snandy  阅读(1025)  评论(0编辑  收藏  举报