Tagged

user-select

A collection of 2 posts

user-select

user-select : 保护版权内容的简单方案

有的适合我们需要保护我们页面的内容,为了版权或者安全等原因,这个适合我们可以使用 user-select 这个CSS属性,简单易用。 嗯,这个属性不麻烦,而且也不是 CSS 3 / CSS 4 的新属性,这里简单归纳一下: .control-select { user-select: none; /* 禁止选择 */ user-select: auto; /* 浏览器来决定是否允许选择 */ user-select: all; /* 可以选择任何内容 */ user-select: text; /* 只能选择文本 */ user-select: contain; /* 选择绑定的元素以内的内容 */ } 不过,这个属性还并没有被各浏览器以标准的行为来实现,所以使用的适合还是要加上各种前缀: .no-select { -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; } 注意: IE 9 才开始支持,IE 8 及更早期的版本不支持 Javascript方案 当然也可以用

css3

user-select介绍

之前在《CSS的未来:一些试验性CSS属性》中有提到user-select这个属性,最近整理的时候有遇到,所以详细的了解了下,这里简单的介绍下。 这是在css3 UI规范中新增的一个功能,用来控制内容的可选择性。 用法: user-select:value; 值: auto——默认值,用户可以选中元素中的内容 none——用户不能选择元素中的任何内容 text——用户可以选择元素中的文本 element——文本可选,但仅限元素的边界内(只有IE和FF支持) all——在编辑器内,如果双击/上下文点击发生在子元素上,改值的最高级祖先元素将被选中。 -moz-none——firefox私有,元素和子元素的文本将不可选,但是,子元素可以通过text重设回可选。 .selectDemo{ background-color:#eee; padding:20px; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; } .selectDemo{ background-color:#eee; padding: