如何禁用CSS或JavaScript文本选择？ [重复]

5 回答

• 4

  <div 
   style="-moz-user-select: none; -webkit-user-select: none; -ms-user-select:none; user-select:none;-o-user-select:none;" 
   unselectable="on"
   onselectstart="return false;" 
   onmousedown="return false;">
      Blabla
  </div>
  

  回复于 2024-04-28T21:58:05+08:00
• 234

  UPDATE January, 2017:

  根据Can I use，除了Internet Explorer 9和早期版本之外，所有浏览器目前都支持 user-select （但遗憾的是仍然需要供应商前缀） .

  ---

  所有正确的CSS变体都是：

  .noselect {
    -webkit-touch-callout: none; /* iOS Safari */
      -webkit-user-select: none; /* Safari */
       -khtml-user-select: none; /* Konqueror HTML */
         -moz-user-select: none; /* Firefox */
          -ms-user-select: none; /* Internet Explorer/Edge */
              user-select: none; /* Non-prefixed version, currently
                                    supported by Chrome and Opera */
  }
  

  <p>
    Selectable text.
  </p>
  <p class="noselect">
    Unselectable text.
  </p>
  

  ---

  请注意，它是 non-standard feature （即不是任何规范的一部分） . 它不能保证在任何地方都可以工作，并且浏览器之间的实现可能存在差异，并且将来的浏览器可能会失去对它的支持 .

  ---

  更多信息可在Mozilla Developer Network documentation找到 .

  回复于 2024-04-28T21:58:05+08:00
• 272

  试试这个CSS代码以实现跨浏览器兼容性 .

  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
  

  回复于 2024-04-28T21:58:05+08:00
• 26

  您可以使用JavaScript来执行您想要的操作：

  if (document.addEventListener !== undefined) {
    // Not IE
    document.addEventListener('click', checkSelection, false);
  } else {
    // IE
    document.attachEvent('onclick', checkSelection);
  }
  
  function checkSelection() {
      var sel = {};
      if (window.getSelection) {
          // Mozilla
          sel = window.getSelection();
      } else if (document.selection) {
          // IE
          sel = document.selection.createRange();
      }
  
      // Mozilla
      if (sel.rangeCount) {
          sel.removeAllRanges();
          return;
      }
  
      // IE
      if (sel.text > '') {
          document.selection.empty();
          return;
      }
  }
  

  Soap box: 你真的不应该以这种方式't be screwing with the client'的用户代理 . 如果客户想要在文档上选择内容，那么他们应该能够在文档上选择内容 . 如果您不喜欢高亮颜色并不重要，因为您不是查看文档的人 .

  回复于 2024-04-28T21:58:05+08:00
• 7

  我不确定你是否可以关闭它，但你可以改变它的颜色:)

  myDiv::selection,
  myDiv::-moz-selection,
  myDiv::-webkit-selection {
      background:#000;
      color:#fff;
  }
  

  然后只是将颜色与你的“黑暗”设计相匹配，看看会发生什么:)

  回复于 2024-04-28T21:58:05+08:00