網誌地址遷至 www.myWoolf.com

禁止highlight (JavaScript & CSS3)

Section 1: This post teach you how to use JavaScript to disable highlight text on a webpage, hence avoid stealing of content by copying. [Permalink]

Section 2: This post teach you how to use CSS3 to disable highlight text on a webpage, hence avoid stealing of content by copying. [Permalink]

为了让这篇教程更整齐,我重新编辑过了 *wink 总之就是教如何禁止 highlight,最起码可以避免文章被直接 copy & paste 的方法。


第一课:用 JavaScript 禁止 highlight。最基本的方法是用 onSelectStart,在大部分支援 JavaScript 的浏览器有效。

将以下代码放在 </head> 之前:<script language="JavaScript">
// Disable highlighting only
document.onSelectStart=new Function("event.returnValue=false;");
</script>

就 JavaScript 我并非在行,但还是可以大致解释以上代码。 event.returnValue=false 的意思是用作禁止某个动作的默认效果的。——这么说吧,原本用户选择文字时,得到的效果应当是 highlight 文字;但这个默认效果被禁止了,自然就没法highlight 文字了。

浏览器如 Firefox, Opera 并不支援 onSelectStart,因此该用接下来的 CSS3 来个双管齐下。


第二课:用 CSS3 禁止 highlight。当然只在支援 CSS3 的浏览器适用。

使用 CSS3 中的 user-select,对所要生效的部分使用。

要在网页全面禁止 highlight,编辑网页的 CSS 部分 (<style> 标签;Blogger 用户则要进入 Edit HTML 页)

在 body { 之後加入以下代碼:
-moz-user-select: none; /* For Gecko (Mozilla Firefox) */
-webkit-user-select: none; /* For WebKit (Google Chrome, Safari) */
-o-user-select: none; /* For Presto (Opera) */
user-select: none;

以上已经包括几个常用的排版引擎,所以在这些著名浏览器上(需支援 CSS3 的版本)都可以成功地禁止 highlight


分享到微信

9 則留言 臉書留言

Copyright © 2007- Zed Woolf, licensed under CC BY-NC-ND 4.0.