使用 CSS3 新属性 user-select 控制网页内容的选择范围

IE10平台预览第四版中包含了对 CSS3 新属性 -ms-user-select 的支持，Web 开发人员可以利用这一新属性轻松精确的控制用户可以在网站上选择哪些文本。

以较为典型的新闻网站为例，大多数页面中会包含一条正文报道，有用户习惯在浏览新闻报道的时候边阅读边用鼠标选中内容，或者选中正文内容与他人进行分享。

与此同时，新闻网站页面上还会包含一些其他内容和链接，用户可能不需要选取这些内容。利用 -ms-user-select 属性，Web 开发人员可以指定对内容正文开启文本选择功能，而禁用选择其他内容。

IE Test Drive 网站上提供了对此项功能的演示示例：

对整个页面设置 -ms-user-select:none，然后对包含博客正文的元素设置 -ms-user-select:element，这样就可以仅允许选择博客正文的内容。-ms-user-select:element 是 IE 首次引入的一个新属性，我们认为这一属性在许多情况下将非常实用。设置 -ms-user-select:element 表示用户可以选择该元素的文本，但选择范围受该元素的边界的约束。希望选择正文内容的用户可能不希望选择紧跟在正文后面的页脚元素。通过设置 -ms-user-select:element，用户可以轻松地选择正文内容，而不必担心鼠标拉动位置过大选取了多余的内容。

-ms-user-select 可设置 4 个值：

text – 可以选择文本
element – 可以选择文本，但选择范围受元素边界的约束
none – 不可以选择文本
auto – 如果该元素包含可编辑的文本（如输入元素或可编辑内容的元素），则可以选择文本。否则，元素内容是否可选择由父节点的值决定。

-ms-user-select 的默认值为 auto。

通过将 -ms-user-select 设置为 none，开发人员可以禁用文本选择功能。在IE浏览器中，如果将文本设置为 -ms-user-select:none，则用户将无法在该文本块中开始选择文本。不过，如果用户在页面的其他区域开始选择文本，则用户可以在页面的任何区域（包括 -ms-user-select 设置为 none 的区域）继续选择文本。在 Firefox 中，如果开发人员设置 –moz-user-select:none，则用户无法在该区域中开始选择文本，也无法在任何其他文本选择操作中包括该区域的文本。在 Webkit 中，设置 –webkit-user-select:none 后，看起来该文本似乎并未包含在选择范围内，但是，当您复制并粘贴内容时，您会看到实际上已包含了该内容。

user-select 最初是在 CSS3 用户界面模块中提出的，之后，该模块被 CSS3 基本用户界面模块所取代，但是后者并未定义该属性。Mozilla 和 Webkit 均支持带自定义前缀的属性版本。不过，如上所述，它们在属性实现方面略有差异。

请大家尝试一下 IE 体验网站上的示例，然后告诉我们您的感受。

—Internet Explorer 项目经理 Sharon Newman

via：Controlling Selection with CSS user-select 中文

使用 CSS3 新属性 user-select 控制网页内容的选择范围

你可能感兴趣的:(使用 CSS3 新属性 user-select 控制网页内容的选择范围)