有没有一种方法可以让文本在HTML页面上不可选?(复制)

This question already has an answer here:

这个问题已经有了答案:

How to disable text selection highlighting? 37 answers
如何禁用文本选择高亮显示?37个答案

I'm building an HTML UI with some text elements, such as tab names, which look bad when selected. Unfortunately, it's very easy for a user to double-click a tab name, which selects it by default in many browsers.

我正在构建一个HTML UI，其中包含一些文本元素，如选项卡名称，这些元素在选择时看起来很糟糕。不幸的是，用户很容易双击标签名，在许多浏览器中，标签名是默认选择的。

I might be able to solve this with a JavaScript trick (I'd like to see those answers, too) -- but I'm really hoping there's something in CSS/HTML directly that works across all browsers.

我可以用一个JavaScript技巧来解决这个问题(我也想看看这些答案)——但我真的希望CSS/HTML中有一些东西能在所有浏览器中直接工作。

16 个解决方案

#1

177

In most browsers, this can be achieved using CSS:

在大多数浏览器中，这可以通过CSS实现:

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

   /*
     Introduced in IE 10.
     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
   */
   -ms-user-select: none;
   user-select: none;
}

For IE < 10 and Opera, you will need to use the unselectable attribute of the element you wish to be unselectable. You can set this using an attribute in HTML:

对于IE < 10和Opera，您需要使用您希望不可选的元素的不可选属性。您可以使用HTML中的属性设置此属性:

<div id="foo" unselectable="on" class="unselectable">...</div>

Sadly this property isn't inherited, meaning you have to put an attribute in the start tag of every element inside the <div>. If this is a problem, you could instead use JavaScript to do this recursively for an element's descendants:

遗憾的是，这个属性没有继承，这意味着您必须在

中每个元素的开始标记中添加一个属性。如果这是一个问题，那么您可以使用JavaScript递归地为元素的后代执行此操作:

function makeUnselectable(node) {
    if (node.nodeType == 1) {
        node.setAttribute("unselectable", "on");
    }
    var child = node.firstChild;
    while (child) {
        makeUnselectable(child);
        child = child.nextSibling;
    }
}

makeUnselectable(document.getElementById("foo"));

#2

<script type="text/javascript">

/***********************************************
* Disable Text Selection script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code

***********************************************/


function disableSelection(target){

    if (typeof target.onselectstart!="undefined") //IE route
        target.onselectstart=function(){return false}

    else if (typeof target.style.MozUserSelect!="undefined") //Firefox route
        target.style.MozUserSelect="none"

    else //All other route (ie: Opera)
        target.onmousedown=function(){return false}

    target.style.cursor = "default"
}



//Sample usages
//disableSelection(document.body) //Disable text selection on entire body
//disableSelection(document.getElementById("mydiv")) //Disable text selection on element with id="mydiv"


</script>

EDIT

编辑

Code apparently comes from http://www.dynamicdrive.com

代码显然来自http://www.dynamicdrive.com

#3

All of the correct CSS variations are:

所有正确的CSS变体是:

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

#4

Try this:

试试这个:

<div onselectstart="return false">some stuff</div>

Simple, but effective... works in current versions of all major browsers.

简单,但有效的…适用于所有主流浏览器的当前版本。

#5

For Firefox you can apply the CSS declaration "-moz-user-select" to "none". Check out their documentation, user-select.

对于Firefox，您可以将CSS声明“- mozilla -user-select”应用到“none”。查看他们的文档，用户选择。

It's a "preview" of the future "user-select" as they say, so maybe Opera or WebKit-based browsers will support that. I also recall finding something for Internet Explorer, but I don't remember what :).

它是未来“用户选择”的“预览”，所以也许Opera或基于webkit的浏览器会支持这一点。我还记得为Internet Explorer找到了一些东西，但我不记得是什么:)。

Anyway, unless it's a specific situation where text-selecting makes some dynamic functionality fail, you shouldn't really override what users are expecting from a webpage, and that is being able to select any text they want.

无论如何，除非是在特定的情况下，文本选择会导致一些动态功能失败，否则您不应该真正地覆盖用户对网页的期望，即能够选择他们想要的任何文本。

#6

I'm finding some level of success with the CSS described here http://www.quirksmode.org/css/selection.html:

我在http://www.quirksmode.org/css/selection.html中发现了一些成功的CSS:

::selection {
    background-color: transparent;
}

It took care of most of the issues I was having with some ThemeRoller ul elements in an AIR application (WebKit engine). Still getting a small (approx. 15 x 15) patch of nothingness that gets selected, but half the page was being selected before.

它解决了我在AIR应用(WebKit引擎)中遇到的大多数问题。仍然得到一个小的(大约。被选中的无用的补丁，但是之前有一半的页面被选中。

#7

Absolutely position divs over the text area with a z-index higher and give these divs a transparent GIF background graphic.

绝对的位置divs在文本区域与z索引更高，并给予这些divs透明的GIF背景图形。

Note after a bit more thought - You'd need to have these 'covers' be linked so clicking on them would take you to where the tab was supposed to, which means you could/should do this with the anchor element set to display:box, width and height set as well as the transparent background image.

后注意一点——你想需要这些“覆盖”有关,所以点击他们会把你的标签应该是,这意味着你可以/应该做这个锚元素设置为显示:盒子,宽度和高度设置为透明背景图像。

#8

For an example of why it might be desirable to suppress selection, see SIMILE TImeline, which uses drag-and-drop to explore the timeline, during which accidental vertical mouse movement causes the labels to be highlighted unexpectedly, which looks weird.

要了解为什么可能需要抑制选择的例子，请参阅SIMILE TImeline，它使用拖放的方法来探索时间轴，在时间轴中偶然的垂直鼠标移动导致标签被意外地突出显示，这看起来很奇怪。

#9

For Safari, -khtml-user-select: none, just like Mozilla's -moz-user-select (or, in JavaScript, target.style.KhtmlUserSelect="none";).

对于Safari， -khtml-user-select: none，就像Mozilla的-moz-user-select(或者，在JavaScript中，target.style.KhtmlUserSelect="none";)一样。

#10

"If your content is really interesting, then there is little you can ultimately do to protect it"

“如果你的内容真的很有趣，那么你最终很难保护它。”

That's true, but most copying, in my experience, has nothing to do with "ultimately" or geeks or determined plagiarists or anything like that. It's usually casual copying by clueless people, and even a simple, easily defeated protection (easily defeated by folks like us, that is) works quite well to stop them. They don't know anything about "view source" or caches or anything else... heck, they don't even know what a web browser is or that they're using one.

这是事实，但根据我的经验，大多数抄袭行为与“最终”或极客或顽固的剽窃者或其他类似的东西没有任何关系。它通常是愚蠢的人随意模仿的产物，即使是简单的、容易被挫败的保护措施(也很容易被像我们这样的人打败)也能很好地阻止他们。他们对“查看源”或缓存或其他东西一无所知……他们甚至不知道什么是web浏览器，或者他们正在使用它。

#11

Here's a Sass mixin (scss) for those interested. Compass/CSS 3 doesn't seem to have a user-select mixin.

这里有一个Sass mixin (scss)给那些感兴趣的人。Compass/CSS 3似乎没有用户选择的mixin。

// @usage use within a rule
// ex. img {@include user-select(none);}
// @param assumed valid user-select value
@mixin user-select($value)
{
    & {
        -webkit-touch-callout: $value;
        -webkit-user-select: $value;
        -khtml-user-select: $value;
        -moz-user-select: $value;
        -ms-user-select: $value;
        user-select: $value;
    }
}

Though Compass would do it in a more robust way, i.e. only add support for vendors you've chosen.

虽然Compass会以一种更健壮的方式来实现它，也就是说，只添加对您所选择的供应商的支持。

#12

If it looks bad you can use CSS to change the appearance of selected sections.

如果看起来很糟糕，您可以使用CSS来更改所选部分的外观。

#13

Any JavaScript or CSS method is easily circumvented with Firebug (like Flickr's case).

任何JavaScript或CSS方法都很容易被Firebug绕过(如Flickr)。

You can use the ::selection pseudo-element in CSS to alter the highlight color.

您可以使用::在CSS中选择伪元素来改变突出显示的颜色。

If the tabs are links and the dotted rectangle in active state is of concern, you can remove that too (consider usability of course).

如果标签是链接，并且虚线矩形处于活动状态，您也可以删除它(当然要考虑可用性)。

#14

There are many occasions when turning off selectability enhances the user experience.

在许多情况下，关闭可选性可以增强用户体验。

For instance allowing the user to copy a block of text on the page without copying the text of any interface elements associated with it (that would become interspersed within the text being copied).

例如，允许用户在页面上复制一个文本块，而无需复制与之关联的任何界面元素的文本(这将在被复制的文本中穿插)。

#15

Images can be selected too.

也可以选择图像。

There are limits to using JavaScript to deselect text, as it might happen even in places where you want to select. To ensure a rich and successful career, steer clear of all requirements that need ability to influence or manage the browser beyond the ordinary... unless, of course, they are paying you extremely well.

使用JavaScript取消选择文本是有限制的，因为即使在您想要选择的地方也可能发生这种情况。为了确保丰富和成功的职业生涯，避开所有需要有能力影响或管理浏览器的需求。当然，除非他们给你的报酬非常优厚。

#16

The following works in Firefox interestingly enough if I remove the write line it doesn't work. Anyone have any insight why the write line is needed.

有趣的是，如果我删除了写行，下面的代码在Firefox中是可以工作的。任何人都知道为什么需要写行。

<script type="text/javascript">
document.write(".");
document.body.style.MozUserSelect='none';
</script>

#1

177