Web Captcha
*****************************
HTML Code
*****************************
<html>
<head>
<link rel="stylesheet" href="style.css"> <!-- The directory of the CSS file -->
<script type="text/javascript" src="index.js"></script> <!-- The directory of the JS file -->
<title> Captcha </title>
</head>
<body onLoad="ChangeCaptcha()"> <!-- As the body loads, the function runs and Captcha is loaded. -->
<input type="text" id="randomfield" disabled> <!-- Change this ID to the desired one, be sure to change it in the CSS and JS files too -->
<br><br>
<input id="CaptchaEnter" size="20" maxlength="6" /> <!-- Change maxlength to the size you wanted your Captcha to be -->
<br><br>
<button onclick="check()">Done</button> <!-- The function is executed when the user presses this button -->
</body>
</html>
*****************************
CSS Code
*****************************
#randomfield {
/*
#randomfield is the ID of the Captcha box
*/
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
/*
user-select: none; makes the text field un-selectable (you wouldn't want the user to simply copy-paste the Captcha, would you?)
Also this shouldn't be confused with the "disabled" attribute written for this input field in the HTML code
*/
width: 200px;
color: black;
border-color: black;
text-align: center;
font-size: 40px;
/* Change the URL to the picture you would want as the background of the text field */
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjLga5xBiSvBP0N7kKolYOa2h7B8Z-u2oulgQIr1lwWJDtDA59oDBRH1TnuWFrfsJBXWbtzO3jdo8ZctJaZ6Es7KXj2fOuzft1LNBVPwu9iEn9YAe7de7QUA40fA0KbCfVlOMewzy5KNTu/s1600/ca.png');
}
*****************************
JS Code
*****************************
// SimpleCaptcha
function ChangeCaptcha() {
var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz";
// You can include special characters by adding them to the string above, for eg: chars += "@#?<>";
var string_length = 6; // This is the length of the Captcha
// ****** CAUTION ****** This just determines the string that'll be produced by the function. To make the Captcha
// field compatible with the updated size, you'll have to change the maxlength attribute in the HTML code
var ChangeCaptcha = '';
for (var i=0; i<string_length; i++) {
var rnum = Math.floor(Math.random() * chars.length);
ChangeCaptcha += chars.substring(rnum,rnum+1);
}
document.getElementById('randomfield').value = ChangeCaptcha; // Final step which changes the field value to the Captcha produced
}
function check() { // Function which checks if the entered value is matching the Captcha
if(document.getElementById('CaptchaEnter').value == document.getElementById('randomfield').value ) {
window.open('https://www.google.co.in','_self');
}
else {
alert('Please re-check the captcha'); // The alert message that'll be displayed when the user enters a wrong Captcha
}
HTML Code
*****************************
<html>
<head>
<link rel="stylesheet" href="style.css"> <!-- The directory of the CSS file -->
<script type="text/javascript" src="index.js"></script> <!-- The directory of the JS file -->
<title> Captcha </title>
</head>
<body onLoad="ChangeCaptcha()"> <!-- As the body loads, the function runs and Captcha is loaded. -->
<input type="text" id="randomfield" disabled> <!-- Change this ID to the desired one, be sure to change it in the CSS and JS files too -->
<br><br>
<input id="CaptchaEnter" size="20" maxlength="6" /> <!-- Change maxlength to the size you wanted your Captcha to be -->
<br><br>
<button onclick="check()">Done</button> <!-- The function is executed when the user presses this button -->
</body>
</html>
*****************************
CSS Code
*****************************
#randomfield {
/*
#randomfield is the ID of the Captcha box
*/
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
/*
user-select: none; makes the text field un-selectable (you wouldn't want the user to simply copy-paste the Captcha, would you?)
Also this shouldn't be confused with the "disabled" attribute written for this input field in the HTML code
*/
width: 200px;
color: black;
border-color: black;
text-align: center;
font-size: 40px;
/* Change the URL to the picture you would want as the background of the text field */
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjLga5xBiSvBP0N7kKolYOa2h7B8Z-u2oulgQIr1lwWJDtDA59oDBRH1TnuWFrfsJBXWbtzO3jdo8ZctJaZ6Es7KXj2fOuzft1LNBVPwu9iEn9YAe7de7QUA40fA0KbCfVlOMewzy5KNTu/s1600/ca.png');
}
*****************************
JS Code
*****************************
// SimpleCaptcha
function ChangeCaptcha() {
var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz";
// You can include special characters by adding them to the string above, for eg: chars += "@#?<>";
var string_length = 6; // This is the length of the Captcha
// ****** CAUTION ****** This just determines the string that'll be produced by the function. To make the Captcha
// field compatible with the updated size, you'll have to change the maxlength attribute in the HTML code
var ChangeCaptcha = '';
for (var i=0; i<string_length; i++) {
var rnum = Math.floor(Math.random() * chars.length);
ChangeCaptcha += chars.substring(rnum,rnum+1);
}
document.getElementById('randomfield').value = ChangeCaptcha; // Final step which changes the field value to the Captcha produced
}
function check() { // Function which checks if the entered value is matching the Captcha
if(document.getElementById('CaptchaEnter').value == document.getElementById('randomfield').value ) {
window.open('https://www.google.co.in','_self');
}
else {
alert('Please re-check the captcha'); // The alert message that'll be displayed when the user enters a wrong Captcha
}
}
Comments
Post a Comment