是否可以禁用 Ctrl + F在页面中查找?
我有一个拼图网站,这是一种可怕的作弊方式。只做一部分也可以,但是能做到吗?
我的想法是用图像替换字母,但还有比这更简单的吗?
I have a puzzle site and its an awful way of cheating. Its okay if only partially, but can it be done?
Something I had in mind was replacing the letters with images, but anything easier than that?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(10)
代码
Code
您可以让“查找”功能找不到这些单词,而不是禁用“查找”功能!一种方法是使用 CSS
content
声明来注入单词。 Find 找不到它们:您也可以轻松编写一些 Javascript 来自动生成所有必要的 CSS 规则。
Rather than disable the Find function, you could make it so that Find won't find the words! One way to do this would be to use the CSS
content
declaration to inject the words. Find won't find them:You could quite easily write some Javascript to automatically generate all the necessary CSS rules for you, too.
您可以在大多数浏览器(IE9、Firefox、Chrome、Opera)中禁用键盘快捷键,但您无法通过在浏览器中单击“查找”来阻止某人使用它。
这里有一些 jQuery 支持的 JavaScript 可以做到这一点:
取自 http://caniuse.com/,其中此功能 经常激怒我。在该网站上,它用于使 CTRL+F 在页面上执行自定义搜索,而不是完全禁用它。
You can disable the keyboard shortcut in most browsers (IE9, Firefox, Chrome, Opera), but you can't stop someone using Find by clicking it in the browser.
Here's some jQuery-powered JavaScript that does it:
Taken from http://caniuse.com/, where this feature regularly irritates me. On that site, it's used to make CTRL+F do a custom search on the page, instead of disabling it completely.
我认为没有办法完全禁用该功能,并且不应该没有办法禁用它。
但是您可以通过将某些文本写入浏览器不考虑连续文本的方式来确保 Ctrl+F 不会找到某些文本。
使用图像是一种相对简单的方法。
或者,您可以随机化字母并使用一些 CSS 魔法重新排列它们(不幸的是,我的 CSS-fu 太弱,无法给出示例)。例如,如果您想“隐藏”单词“hello”,则在单独的
中写出每个字母的“lehol”,并应用一些 CSS 样式,以便在视觉上这些字母将以正确的顺序。
请注意,这(可能还有所有其他可行的解决方案)也会破坏文本的复制和粘贴。
I don't think there's a way to disable the feature altogether and there should not be a way to disable it.
However you can ensure that some text will not be found by Ctrl+F by writing it in away that the browser doesn't consider continous text.
Using images is one approach that's relatively simply.
Alternatively you can randomize the letters and re-arrange them with some CSS magic (my CSS-fu is too weak to give an example, unfortunately). For example if you want to "hide" the word "hello", then write out "lehol" with each letter in a separate
<div>
and apply some CSS styles so that visually the letters will be in the correct order.Note that this (and probably all other working solutions as well) will also break copy-and-paste of the text.
这是一个 jQuery 插件,可以满足您的需求。
Here's a jQuery plugin that does what you're looking for.
我认为使用 keydown 可以实现这一点,但从原则上讲,改变浏览器的行为方式是一个坏主意。尽管这对您来说比较麻烦,但有一些字体替换技术可以让它变得更容易。
如果你确实找到了一种方法来做到这一点,那么总是存在有人绕过它的危险。编写可以正常工作的页面比破解浏览器要好得多。
I would presume that using keydown would enable this, however as a matter of principle, changing the way that a browser behaves is a bad idea. Although it is more of a pain for you to do, there are font replacement techniques that should make it easier.
If you do find a means of doing this, there is always a danger that someone will get around it. It is far better to write the page to work whatever than hack the browser.
你可以用 javascript 来做到这一点 - 这只是伪代码(用 jQuery 编写),因为我不确定如何监听 ctrl 和 f,但你明白了:
像这样返回 false 将停止浏览器执行任何操作据我所知,按键已按下。如果
return false;
还不够,您还可以使用e.preventDefault();
来尝试阻止发生任何情况。希望这有帮助
you can do it with javascript - this is only pseudocode (written in jQuery) as I'm not certain how to listen for both a ctrl AND an f, but you get the idea:
Returning false like this will stop the browser doing anything when the keys are pressed, as far as I know. you could also use
e.preventDefault();
to try to prevent anything happening ifreturn false;
isn't enough.Hope this helps
不会。用图片替换是最快、最安全的方法。 (除非你愿意切换到Flash/Java Applet/等)
No. Replacing with images is the fastest and the safest way. (Unless you are willing to switch to Flash/Java Applet/etc.)
为什么不使用 Shadow DOM 呢?这将使搜索引擎或屏幕阅读器无法访问您的内容。并且具有为用户提供完全相同的行为的额外好处。
请查看此处了解更多信息:Shadow DOM 简介
Why not use the Shadow DOM ? This will allow your content to be inaccessible by search engines or screen readers. And has the added bonus of having the exact same behavior for the user.
Take a look here for more info: Introduction to Shadow DOM
在
中渲染您的网站,而不是使用 HTML。
Render your website inside a
<canvas>
instead of using HTML.