• 欢迎访问搞代码网站,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站!
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏搞代码吧

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

php 搞代码 3年前 (2018-06-21) 124次浏览 已收录 0个评论

经常到各大网站去留言或者发帖的朋友应该知道现在很多网站的留言地方的验证码不是直接显示的。而是在点击验证码输入框之后才会显示出来验证码的。下面作者也总结了一篇关于如何利用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)首先是生成验证码的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('<img src="http://www.Alixixi.com/web_include/checkcode.php" />');  }); }); </script> </head> <body> <span><input type="text" size="20"  value="" /></span><span ></span> </body> </html>

欢迎大家阅读《点击文本框后才加载验证码的JS代码_php》,跪求各位点评,若觉得好的话请收藏本文,by 搞代码


喜欢 (0)
[搞代码]
分享 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址