阻止用户在移动浏览器上复制文本 [英] Prevent user from copying text on mobile browsers
问题描述
我正在尝试使用JavaScript开发打字速度竞赛.人们应该将div中看到的所有单词都写到文本区域.
I'm trying to develop a typing speed competition using JavaScript. People should write all the words they see from a div to a textarea.
要防止作弊(例如从div复制单词)，一种方法是仅在按下键盘键时才检查书面单词，但是我想知道是否有一种方法可以防止用户在浏览器中复制文本?
To prevent cheating (like copying the words from div) one way is check the written words only when a keyboard key is down, but I was wondering if there is a way to prevent the user from copying the text in a browser?
到目前为止我尝试过的事情:
What I have tried so far:
- 禁用右键单击(不适用于移动浏览器)
- 在所有页面中使用onmousedown事件显示警报(它也不起作用)
使用任何库都是可以的.
Using any libraries is OK.
推荐答案
感谢您的出色解决方案.我测试了所有这些，简而言之，其中一些只能在PC上运行，有些只能在Chrome和Firefox上运行，有些只能在
Thanks for your amazing solutions. I tested all of them, and in short some of them worked only on a PC, some only on Chrome and Firefox and some only on Safari, but unfortunately none of them worked 100%.
尽管@Max答案可能是最安全的，但我没有在问题中使用PHP标记，因为如果我使用此解决方案来处理答案，那将是困难的，因为我无法在客户端使用单词！
Although @Max answer might be safest, I didn't tag with PHP in the question because if I use this solution dealing with answers, it will be hard because I don't have access to words on the client side!
因此，我提供的最终解决方案是将所有提供的答案以及一些新方法(例如每秒清除剪贴板)组合到一个jQuery插件中.现在，它也可以在多种元素上运行，并且可以100％在PC浏览器，Firefox，Chrome和Safari上运行.
So the ultimate solution I came with was combining all of the provided answers plus some new methods (like clearing the clipboard every second) into a jQuery plugin. Now it works on multiple elements too and worked 100% on PC browsers, Firefox, Chrome, and Safari.
- 防止粘贴(可选)
- 清除剪贴板(看起来效果不佳)
- 吸收所有触摸事件
- 禁用右键单击
- 禁用用户选择
- 禁用指针事件
- 在任何选定的DOM内添加具有z-index的遮罩
- 在任何选定的DOM上添加透明的div
一个jsFiddle :
(function($) {
$.fn.blockCopy = function(options) {
var settings = $.extend({
blockPasteClass : null
}, options);
if(settings.blockPasteClass){
$("." + settings.blockPasteClass ).bind('copy paste cut drag drop', function (e) {
e.preventDefault();
return false;
});
}
function style_appender(rule){
$('html > head').append($('<style>'+rule+'</style>'));
}
function html_appender(html){
$("body").append(html);
}
function clearClipboard() {
var $temp = $("#bypasser");
$temp.val("You can't cheat !").select();
document.execCommand("copy");
}
function add_absolute_div(id) {
html_appender("<div id='noClick"+id+"' onclick='return false;' oncontextmenu='return false;'> </div>");
}
function absorbEvent_(event) {
var e = event || window.event;
e.preventDefault && e.preventDefault();
e.stopPropagation && e.stopPropagation();
e.cancelBubble = true;
e.returnValue = false;
return false;
}
function preventLongPressMenu(node) {
node.ontouchstart = absorbEvent_;
node.ontouchmove = absorbEvent_;
node.ontouchend = absorbEvent_;
node.ontouchcancel = absorbEvent_;
}
function set_absolute_div(element,id){
var position = element.position();
var noclick = "#noClick" + id;
$(noclick).css({
height: (element.height()),
width: (element.width()),
position: 'absolute',
top: position.top,
left: position.left,
'z-index': 100
})
}
$("body").bind("contextmenu", function(e) {
e.preventDefault();
});
//Append needed rules to CSS
style_appender(
"* {-moz-user-select: none !important; -khtml-user-select: none !important; -webkit-user-select: none !important; -ms-user-select: none !important; user-select: none !important; }"+
".content {position: relative !important; }" +
".content .mask {position: absolute !important ; z-index: 1 !important; width: 100% !important; height: 100%!important;}" +
".content a {position: relative !important; z-index: 3 !important;}"+
".content, .content .mask{ pointer-events: none;}"
);
//Append an input to clear the clipboard
html_appender("<input id='bypasser' value='nothing' type='hidden'>");
//Clearing clipboard Intervali
setInterval(clearClipboard,1000);
var id = 1;
return this.each( function() {
//Preventing using touch events
preventLongPressMenu($(this));
//Add CSS preventer rules to selected DOM & append mask to class
$(this).addClass("content").append("<div class='mask'></div>");
//Append an absolute div to body
add_absolute_div(id);
//Set position of the div to selected DOM
set_absolute_div($(this),id);
id++;
});
}
}(jQuery));
用法
$(document).ready(function(){
$(".words").blockCopy({
blockPasteClass : "noPasting"
});
});
演示HTML:
<div class="words">Test1: Can you copy me or not?</div><br>
<div class="words">Test2: Can you <br> copy me or not?</div><br>
<textarea class="words">Test3: Can you <br>copy me or not?</textarea><br>
<textarea class="noPasting" placeholder="Test1: Paste content if you can" ></textarea><br>
<textarea class="noPasting" placeholder="Test2: Paste content if you can" ></textarea>
让我知道您的意见.谢谢.
Let me know your opinions. Thanks.
这篇关于阻止用户在移动浏览器上复制文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
