• user-select 用户禁止选中


      我们在页面输入的文本按理来说应该都是可以选中的,但是如何才能让显示出来的文本或是图片不被选中呢,这时候就需要用到 user-select 属性。

    user-select

    user-select (CSS属性),控制着用户能否选中文本。除了在文本框中,在 Chrome浏览器中对已经加载的文本没有影响。

    一、语法:

    user-select:none / text / all / element / auto

    user-select 属性的默认值为 text,没有继承性,适用于替换元素外的所有元素。

    二、属性值:

      none:文本不能被选中。注意这个 Selection 对象包含这些元素。从 Firefox21 开始,none表现的想 -moz-none,因此可以使用 -moz-user-select :text 在子元素上重新启用选择。

      text:默认值,可以选中文本

      all:当所有内容可以作为一个整体被选择。(如果双击或是在上下文上点击子元素,那么包含该元素的子元素也将被选中。)

      element:可以选择文本,但是选择范围受元素边界的约束

      auto:auto的计算值确定如下:

    • 在::before 和 ::after 伪元素上,计算的属性是 none
    • 如果元素是可编辑元素,则计算值是 contain
    • 否则,如果此元素的父元素的 user-select 的计算值为 all,则计算值为 all
    • 否则,如果此元素的父级上的 user-select 的计算值为 none,则计算值为 none
    • 否则,计算值则为 text

    注:Selection对象表示用户选择的文本范围或插入符号的当前位置。它代表页面中的文本选区,可能横跨多个元素。文本选区由用户拖拽鼠标经过文字而产生。

     注意:在不同浏览器之间实现的一个区别是继承。 在Firefox中,-moz-user-select不会被绝对定位的元素继承,但在Safari和Chrome中,-webkit-user-select由这些元素继承。

    三、设置或检索是否允许用户选中文本

      IE6-9不支持该属性,但是支持使用标签属性 onselecstart = 'return false;' 来达到 user-select: none 的效果。Safari 和 Chrome 也支持该标签属性。

      直到Opera12.5 仍然不支持该属性,但是和 IE6-9一样,也支持私有的标签属性 unselectable = 'on' 来达到 user-selector:none 的效果;unselectable 的另外一个值是 off;

      除了 Chrome 和 Safari外,和在其他浏览器中,如果将文本设置为 -ms-user-select:none; 则用户将无法在该文本块中开始选择文本。不过,如果用户在页面的其他区域开始选择文本,则用户仍然可以继续选择将文本设置为 -ms-user-select:none; 的区域文本。

     

    四、浏览器兼容性:

     

    红色:no supported (不支持)

    绿色:supported (支持)

    绿色有黄色标识:supported width prefix (支持但需要前缀)

    五、实例:

    HTML

    <p>你应该可以选中这段文本。</p>
    <p class="unselectable">你不能选中这段文本!</p>

    CSS

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

    参考资料:

    https://developer.mozilla.org/zh-CN/docs/Web/CSS/user-select 

    https://www.html.cn/book/css/properties/user-interface/user-select.htm#a3

  • 相关阅读:
    [Github]在仓库中添加Sponsor赞助者按钮
    SpringMVC面试题常问的29道(附答案)
    Spring常问面试题及答案汇总(2020版)
    Java面试题及答案整理(2020最新版)
    MySQL数据库下载及安装教程(最新版!史上最详细!)
    +0与-0在plc传递数值上的坑
    halcon极坐标转换与亮暗缺陷检测结合的案例(转)
    互联网项目管理
    zabbix 监控IO DISK
    转 更改当前schema
  • 原文地址:https://www.cnblogs.com/nyw1983/p/12017820.html
走看看 - 开发者的网上家园