Prevent user from copying text on mobile browsers

Question

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.

To prevent cheating (like copyin

Answer 1

Try putting a transparent div over the text. I have used jQuery here. That should work.

var position = $('#textInHere').position();
$('#noClickThroughThis').css({
    height: ($('#textInHere').height()),
    width:  ($('#textInHere').width()),
    position: 'absolute',
    top: position.top,
    left: position.left,
    'z-index': 100
});

Here is a fiddle http://jsfiddle.net/lacrioque/tc4bwejn/

Answer 2

A simpler solution than the accepted one would be to simply use a canvas element with filltext

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillText("Can't copy this", 5, 30);

<canvas id="myCanvas"></canvas>

JSFiddle example

Answer 3

A good way to work out if a user is cheating is to compare the current input length to the last input length. You can use a data attribute to store the previous value (or length):

<textarea class="typing-only" data-temp=""></textarea>

jQuery:

$(document).on('input', '.typing-only', function(){
    if((this.value.length - 1) > $(this).data('temp').length){
        alert('Cheat!');
    }
    $(this).data('temp', this.value);
});

JSFiddle demo

Answer 4

You can simply make the text into an image.

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

To generate the images you can use a server side script as in the aswers of this question

or something like this:

<?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

Answer 5

You can return false on jQuery's cut copy paste events.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).on("cut copy paste", function(event){
  return false;
});
</script>
<textarea>Try to copy my text</textarea>