使用 CSS user-select 控制选择范围

IE10 平台预览版第 4 版包含了对新的 CSS 属性 -ms-user-select 的支持，Web 开发人员可以利用这一新属性轻松地精确控制用户可以在网站上选择哪些文本。如果您看过我在工作站一整天的工作，您会注意到当我在计算机上阅读信息时，我会选择文本。这种阅读习惯并不是我个人的专利；在许多其他情形中，选择 Internet 上的文本都是必不可少的重要操作。

以典型的新闻网站为例，大多数页面将会包含一条新闻报道，用户希望能够选择新闻报道的内容，因为这符合其阅读习惯或者他们希望与他人分享这些内容。此外，新闻页面上还包含一些用于访问网站的其他部分的菜单和链接。用户可能不需要选择这些项目。利用 -ms-user-select，Web 开发人员可以指定对新闻报道启用文本选择功能，而对菜单禁用文本选择功能。

IE 体验网站上提供了对此项功能的演示示例。

对整个页面设置 -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