css禁止用户选择文字_CSS用户选择

css禁止用户选择文字

In my quest to contribute to every Mozilla project possible, I spent some time last Friday making updates to Firefox DevTools.  The JSON Viewer component needed some love so that was first on my list.  While viewing the CSS for the JSON Viewer component, I saw something I hadn't recognized:  CSS user-select:

为了尽可能为每个Mozilla项目做出贡献，上周五我花了一些时间来更新Firefox DevTools。 JSON Viewer组件需要一些帮助，因此这是我的首要任务。 在查看JSON Viewer组件CSS时，我看到了一些我不认识的东西：CSS user-select ：

.heading {
  -moz-user-select: none; /* don't allow selection */
}

View Demo 观看演示

After a bit of research, I found that you can control what content can be is selected using CSS:

经过一些研究，我发现您可以控制使用CSS选择哪些内容：

  .dont-select {
    user-select: none;
  }

  .control-select {
    user-select: none; /* don't select anything */
    user-select: auto; /* let the browser decide */
    user-select: all; /* select everything */
    user-select: text; /* select only text */
    user-select: contain; /* selection contained within element bounds */
  }

When I think about it, there's certainly an argument to be made that you'd prefer some content be selected and copied and others content not, like advertisements or images.

当我考虑这件事时，肯定会有一个论点，那就是您希望选择并复制某些内容，而不选择广告或图像之类的其他内容。

View Demo 观看演示

This falls into the family of CSS pointer-events where CSS is used for something other than display.  My first thought is that selection preference should be done via a HTML attribute, like autocomplete and autocorrect are.  Anyways, give the demo a roll!

这属于CSS指针事件家族，其中CSS用于显示以外的其他用途。 我的第一个想法是选择首选项应该通过HTML属性autocomplete ，例如autocomplete和autocomplete autocorrect 。 无论如何，请演示一下！

翻译自: https://davidwalsh.name/user-select

css禁止用户选择文字