javascript - 防止用户在移动浏览器上复制文本

Question

我正在尝试使用 JavaScript 开发打字速度竞赛。人们应该将他们从 div 中看到的所有单词写到文本区域中。

为了防止作弊(比如从 div 中复制文字)，一种方法是仅在按下键盘键时检查文字，但我想知道是否有办法防止用户在浏览器中复制文字？

到目前为止我尝试了什么:

1. 禁用右键单击(不适用于移动浏览器)
2. 在所有页面中使用 onmousedown 事件显示警报(它也不起作用)

使用任何库都可以。

Answer 1

您可以简单地将文字制作成图片。

<style type="text/css">
div.image {
    width: 100px;
    height: 100px;
    background-image: url-to-your-image;
}
</style>

要生成图像，您可以使用服务器端脚本，如 this question 的答案

或者类似这样的东西:

<?php
header("Content-type: image/png");
$im = @imagecreate(210, 30)
or die("Cannot Initialize new GD image stream");
$background_color = imagecolorallocate($im, 255, 255, 255);
$text_color = imagecolorallocate($im, 0, 0, 0);
imagestring($im, 4, 5, 5,  "This is a test", $text_color);
imagepng($im);
imagedestroy($im);
?> 

Test here