Question

如何让我的HTML的某些部分无法选择？

我有一些绝对定位的div，如果用户试图选择我的页面内容，它会一直被选中。

有没有办法让某些元素（例如那些div）不可选？

编辑：主要问题是当有人复制这些绝对div并将其粘贴到我网站上的富文本编辑器中时，富文本编辑器会在IE上中断。

Answer 1

对于IE，添加属性unselectable="ON"。（编辑：虽然不会完全有帮助）

对于Gecko，添加CSS样式-moz-user-select: none。

对于WebKit，添加CSS样式-webkit-user-select: none。

Answer 2

如果您想隐藏选择矩形，可以使用

element::selection { background: transparent }

它与Gecko相对应

element::-moz-selection { background: transparent }

如果您想帮助用户选择要复制到剪贴板的正确文本，可以将元素移开。通常，浏览器会保留元素的顺序，因为它们在选择时在HTML中定义。虽然它不是完美的解决方案，但您可以在<body>标记的开头或结尾处将元素的代码放在HTML中。这样，如果用户在页面中间选择了某些内容，该元素将“太远”而无法干涉。

Answer 3

本文可能有助于跨浏览器解决方案:(使用jQuery） http://aleembawany.com/2009/01/20/disable-selction-on-menu-items-with-this-jquery-extension/

理论上，您可以使用以下方法扩展jQUery核心：

jQuery.fn.extend({ 
    disableSelection : function() { 
            return this.each(function() { 
                    this.onselectstart = function() { return false; }; 
                    this.unselectable = "on"; 
                    jQuery(this).addClass('unselectable');
            }); 
    } 
});

并像这样应用：

// disable selection on selected objects 
$('.myClass').disableSelection();

你必须确保在样式表中有这个：

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

看起来好像它基本上是SLaks和Sime提到的那样。我没有尝试过，但我有兴趣知道它是否有效

Answer 4

您可以使用::selection伪元素来选择某个元素“不可见”：

p::selection { background-color:transparent; }  
p::-moz-selection { background-color:transparent; }

然而，这在IE中不起作用。

Answer 5

jQuery解决方案：

$(".unselectable").disableSelection();

如何使我的HTML的某些部分无法选择？

5 个答案: