javascript 如何防止用户从我的网页中选择和复制文本

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/10930301/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 11:30:41  来源:igfitidea点击:

How to prevent user from selecting and copying text from my webpage

javascripthtmlcss

提问by Prashanth Palaniswamy

I know that we can use javascript to achieve this but disabling the javascript in the web browser, user can easily copy text. Is there any way for this using CSS?

我知道我们可以使用 javascript 来实现这一点,但在 Web 浏览器中禁用 javascript,用户可以轻松复制文本。有没有办法使用CSS?

回答by Madara's Ghost

If you don't want someone copying your text, don't place it on the web.

如果您不希望有人复制您的文字,请不要将其放在网络上。

The web's source is visible, free to read, and to copy.

网络的来源是可见的,可以免费阅读和复制。

Even with all the CSS, JavaScript or imagary tricks you may pull off, nothing will prevent a user from manually reading and copying your text to a different document/location.

即使您使用了所有 CSS、JavaScript 或想象技巧,也没有什么能阻止用户手动阅读您的文本并将其复制到不同的文档/位置。

The best you can probably hopeto do is to annoypeople enough to discourage them from copying your text. But like all other things, someone persistent would be able to pull it off.

您可能希望做的最好的事情就是惹恼人们,以阻止他们复制您的文本。但就像所有其他事情一样,坚持不懈的人将能够成功。

That's what us humans do.

这就是我们人类所做的。

回答by Rickzin Pema

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

回答by GordonM

There's no way to stop someone sufficiently determined from copying the text of your website. Even if there was some hypothetical perfect way of blocking copying and pasting or downloading the pages to only be viewed and not saved (which there isn't), someone with enough time and motivation can just type out the text by hand if they really wanted it.

没有办法阻止有足够决心的人复制您网站的文本。即使有一些假设的完美方式来阻止复制和粘贴或下载页面,只查看而不保存(没有),但有足够时间和动力的人如果真的需要,也可以手动输入文本它。

The web is designed to be open. And a good thing that it is too. Extracting the data from a web page authored in 1991 isn't particularly difficult. Try doing the same thing with a Microsoft Word document from the same era without using a Microsoft product.

网络被设计为开放的。它也是一件好事。从 1991 年创作的网页中提取数据并不是特别困难。尝试在不使用 Microsoft 产品的情况下,对同一时代的 Microsoft Word 文档执行相同的操作。

回答by Macros

Similar question herewith some good answers so I won't cover old ground

类似的问题在这里有一些很好的答案,所以我不会覆盖旧的领域

Whatever you do, the user is still going to be able to view the source of the page and copy anything from there. The only way to totally prevent it is not to display any text at all (e.g. display an image, or dynamically create an image which isn't great for accessibility)

无论您做什么,用户仍然可以查看页面的源代码并从那里复制任何内容。完全防止它的唯一方法是根本不显示任何文本(例如显示图像,或动态创建不利于可访问性的图像)

回答by CSS Guy

The web is open source, free to read, there is no way to warn people to copy content even with java script but you can warn via CSS. trick like below.

网络是开源的,可以免费阅读,即使使用 java 脚本也无法警告人们复制内容,但您可以通过 CSS 进行警告。技巧如下。

Try this...

试试这个...

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

回答by Leiko

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

This is a good way to prevent user from selecting text. And this is not a bad answer. For instance, if you work on a website that uses Canvas (HTML5) and allows users to drag'n'drop stuff on this canvas; if the user is going out of canvas defined zone, text will start to get 'selected'. Which is ugly. So for obvious ergonomic reasons, this is a good way to go.

这是防止用户选择文本的好方法。这不是一个糟糕的答案。例如,如果您在使用 Canvas (HTML5) 并允许用户在此画布上拖放内容的网站上工作;如果用户离开画布定义的区域,文本将开始被“选中”。这是丑陋的。因此,出于明显的人体工程学原因,这是一个很好的方法。

回答by Satya Pendem

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

The text won't be selected but, We can copy the text in some cases.

文本不会被选中,但在某些情况下我们可以复制文本。

回答by nomis

What your client, and many others, are looking for is not possible, because they don't understand how web pages are transmitted, but, these clients will probably be happy with making it "difficult" for a user to copy the text. There are other use-cases where text that could be marked as not copyable would be a useful feature, for example, you want to make it easy for a user to copy some text without copying something that makes no sense to copy, like metadata, for example a time stamp.

您的客户和许多其他客户正在寻找的内容是不可能的,因为他们不了解网页是如何传输的,但是,这些客户可能会对让用户“难以”复制文本感到满意。还有其他用例,其中可以标记为不可复制的文本将是一个有用的功能,例如,您希望让用户轻松复制某些文本而不复制一些没有意义的内容,例如元数据,例如时间戳。

As far as the previous answers, they seem to indicate the way to do this with css is with the user-selectcss property, however, this keeps the text from appearing to be selected, but it will still copy to the clipboard. However, that is the best you will get with css alone and might dissuade some users from copying your content.

就先前的答案而言,它们似乎表明使用 css 执行此操作的方法是使用user-selectcss 属性,但是,这会使文本看起来不会被选中,但它仍会复制到剪贴板。但是,这是您单独使用 css 所能获得的最好效果,并且可能会阻止一些用户复制您的内容。

Javascript will take it one step further and make it difficult to copy from the browser window without using developer tools.

Javascript 将更进一步,并且在不使用开发人员工具的情况下很难从浏览器窗口复制。