点击文本框后才加载验证码的JS代码-php手册-PHP中文网

点击文本框后才加载验证码的JS代码

php中文网

发布： 2016-06-21 08:49:11

原创

1715人浏览过

经常到各大网站去留言或者发帖的朋友应该知道现在很多网站的留言地方的验证码不是直接显示的。而是在点击验证码输入框之后才会显示出来验证码的。下面作者也总结了一篇关于如何利用js实现点击文本框然后再加载验证码的效果的。

首先我们来说说为什么要这么做吧，据作者看来，这个效果的目的应该不仅仅是为了美观的，更多的应该是进一步防止别有用心之人用机器人发送垃圾留言或者垃圾帖子。因为我们在网站留言的时候设置个验证码的目的就是为了防止机器人的，然而现在已有传言说有能够识别验证码图片的机器人了。那么这该怎么办？那就再加一步更像人的操作吧，那就是加这个效果了，点击一下输入框，更能确定我们是个人，而非机器人。

好了，废话少说，下面是具体的实现代码。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>点击文本框后才加载验证码的JS代码示例</title>
<style type="text/css">
span{float:left;}
#checkCode{width:40px;height:23x;background-color:#009999;font-size:14px;color:#FFF;display:none;text-align:center;}
</style>
<script language="javascript">
function loadCheckCode(){
	document.getElementById('checkCode').style.display='block';
}
</script>
</head>
<body>
<span><input type="text" size="20"  value=""  /></span><span >6253</span>
</body>
</html>

登录后复制

以上这个就非常的简单了，其实比较流行且实用的应该是ajax形式的，下面来看看使用ajax实现这个效果的方法吧。

空心菜的米库

1，对界面进行了美化2，对文件里边相同代码进行了综合3，增加了点击次数统计，并对3次点击以上的域名增加热门字样4，对本站出售和个人出售进行了划分5，增加钻石状态说明6，增加了完整的后台界面7，增加对资料修改功能8，增加回收站，可以任意删除域名、恢复删除域名和永久删除数据9，还有其他的细节大家自己看~10.增加域名证书显示11.域名到期时间采用日历控件形式12.后台登陆添加了验证码功能13.还有很多

查看详情

（1）首先是生成验证码的php文件代码（checkCode.php），没有的可以参照下面两篇文章，这里就不放代码了。

php生成验证码函数
php生成动态验证码图片

（2）具体html文件及处理代码如下：

<html xmlns="http://www.Alixixi.com/javascript-function/661.html">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>点击文本框后才加载验证码的JS代码示例</title>
<script type="text/javascript" src="http://www.Alixixi.com/js/jquery.js"></script>
<script type="text/javascript">
$(function(){
	$('#Alixixi').focus(function(){
		$('#checkCode').html('@@##@@');
	});
});
</script>
</head>
<body>
<span><input type="text" size="20"  value="" /></span><span ></span>
</body>
</html>

登录后复制