Simple JavaScript Captcha Code

I wanted to add a very simple “Keep the spammers away” thing on a static website. Being a PHP programmer, the first thought that hit my processor was the imagecreate. The site being a static site, PHP was out of question. So my next choice was JavaScript, a very simple JavaScript Captcha. All that it takes is 10 images of 20 x 20 px (Size depends on the layout of your website) for random numbers. Make images of different fonts and color to make it little difficult for the bots to read. Remember to name the images as the value name. For e.g. 1 should be named as 1.gif, 2 as 2.gif and so on.

I have included a JavaScript based md5 file for encryption. I found this brilliant piece of code from http://pajhome.org.uk/crypt/md5

var path ="path/to/your/js/folder/"
document.write(path+"md5.js")

This is the only way I could include the md5 file in a JavaScript Document.

Some global variables.

var myCaptchNumber, randomNum

getRandomNumber is a simple function that calls makeRandoNum to collect an array of four digit Random numbers. This is stored in value. To cross check the randomly generated value, we collect that as number in myCaptchaNumber.
function getRandomNumber()
{
randomNum = new Array(makeRandomNum(),makeRandomNum(),makeRandomNum(),makeRandomNum())
var value = randomNum[0]+""+randomNum[1]+""+randomNum[2]+""+randomNum[3]
myCaptchNumber = parseInt(value)
}

makeRandomNum generates a random single digit number using Math.random(). Since this generates a float value, we multiply that by 10 and the round it off using Math.ceil. One small check is that if the rounded number happens to be 10 then we assign it as 0.


makeRandomNum = function()
{
var makeRandomNum = Math.ceil((Math.random()*10))
return (makeRandomNum > 9) ? 0 : makeRandomNum
}

Now this is where the actual challenge lies. Since it is a JavaScript based Captcha code, we cannot create an image instead we arrange these images as if it were one single image.


function makeImage()
{
makeImg = ""
for(var i=0; i< randomNum.length; i++)
{
makeImg += "<img alt="" src="your/path/to/image/folder/"+randomNum[i]+".gif"/ >"
}
return makeImg;
}

We have the random number ready, set of images in sequence ready. All that we need to do now is display it as a HTML component and make it work. Please note the line where we generate a publickey. This variable contains md5 value of the random number and I have added some more text to make the value little more complex than md5 of simple numbers.
function imgCaptcha(backGround)
{
var make
var publickey
getRandomNumber()
var backColor = (backGround)? backGround : "none"
make = "<div id=\"captcha_div\" style=\"margin:3px;\"><span id=\"captcha_p\" style=\"background-color:#"+backColor+"border:1px solid #000000;height:25px;padding-top:5px;width:135px;margin-left:-2px;margin-bottom:3px;\" align=\"center\">"+makeImage()+"</span><br />"
make += "<input id=\"submitcaptcha\" name=\"submitcaptcha\" type=\"text\" maxlength=\"4\" style=\"width:135px;\" autocomplete=\"off\"/>"
publickey = hex_md5("blowFish"+myCaptchNumber)
make += "<input id=\"submitkey\" name=\"submitkey\" type=\"hidden\" value=\""+publickey+"\" /> </div>"
document.write(make)
}

The above function produces a div inside which you have a user input textbox, a hidden field with md5 value of the random number created and the set of images in a span to make it look like a single image.
How to use this file in your HTML page.

  • Include this file say captcha.js in your html file.
  • Type this statement where ever you want to display the captcha code.

imgCaptcha(’FFFFFF’)

This will give a white background to the images

imgCaptcha()

The background remains transparent.

Use CSS to adjust the height,width, color and placement of the captcha element as per your website.

About these ads

2 thoughts on “Simple JavaScript Captcha Code

  1. This piece of writing provides clear idea designed for the new visitors of blogging,
    that truly how to do running a blog.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s