How to Make a Simple Captcha with Javascript

Hello everyone, on this occasion I will share how to make a simple captcha with a javascript random string, so that later the captcha will be in the form of random text and numbers.

I thought about making this tutorial because some time ago I saw members in my group discussing the captcha plugin, so I thought of making a simpler captcha with javascript. Captcha info at a glance is a feature that provides a layer of security on the website to ensure that the website is accessed by real humans, not robots. first, make the html input as below, to make it more interesting, please add your own css.

<div class='box'>WDhq2</div>
<input class="input" type="text" name="captcha" onkeyup="cekCaptcha()"/>

and create javascript as below.

function randomString(len,charSet)	{
	charSet = charSet || 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
	var randomString = '';
	for (var i = 0; i < len; i++){
		var randomPoz = Math.floor(Math.random() * charSet.length);
		randomString += charSet.substring(randomPoz,randomPoz+1);
	}
	return randomString;
}

function cekCaptcha(){
	var inputUser = document.querySelector(".input");
	var captcha = document.querySelector(".box").innerHTML;

	if(inputUser.value === captcha){ // jika captcha benar jalankan fungsi di bawah ini
		alert('captcha benar');

	}else if (inputUser.value.length === 5 && inputUser.value != captcha){ // jika captcha salah kosongkan bidang input dan acak captcha
		inputUser.value ='';
		document.querySelector(".box").innerHTML = randomString(5);

	}
}

ok so that ‘s how to make a simple captcha with javascript that I can share this time, hopefully it’s useful and thanks for visiting.

Leave a Comment