js点击文本框后才加载验证码实例代码


Posted in Javascript onOctober 20, 2015

经常到各大网站去留言或者发帖的朋友应该知道现在很多网站的留言地方的验证码不是直接显示的。而是在点击验证码输入框之后才会显示出来验证码的。下面作者也总结了一篇关于如何利用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" id="phpernote" value="" onClick="loadCheckCode()" /></span><span id="checkCode">6253</span> 
</body> 
</html>

以上这个就非常的简单了,其实比较流行且实用的应该是ajax形式的,下面来看看使用ajax实现这个效果的方法吧。
(1)首先是生成验证码的php文件代码(checkCode.php),没有的可以参照下面两篇文章,这里就不放代码了。

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

(2)具体html文件及处理代码如下:

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

以上就是实现点击文本框后才加载验证码的JS代码,希望大家喜欢。

Javascript 相关文章推荐
jQuery学习笔记之jQuery的事件
Dec 22 Javascript
基于MVC3方式实现下拉列表联动(JQuery)
Sep 02 Javascript
js Dialog 去掉右上角的X关闭功能
Apr 23 Javascript
jquery实现鼠标滑过后动态图片提示效果实例
Aug 10 Javascript
JS实现的简洁纵向滑动菜单(滑动门)效果
Oct 19 Javascript
JavaScript中的return语句简单介绍
Dec 07 Javascript
浅谈javascript的闭包
Jan 23 Javascript
JQuery validate 验证一个单独的表单元素实例
Feb 17 Javascript
js实现canvas图片与img图片的相互转换的示例
Aug 31 Javascript
javascript基于定时器实现进度条功能实例
Oct 13 Javascript
JavaScript轮播停留效果的实现思路
May 24 Javascript
node.JS二进制操作模块buffer对象使用方法详解
Feb 06 Javascript
javascript实现状态栏中文字动态显示的方法
Oct 20 #Javascript
基于jQuery实现的扇形定时器附源码下载
Oct 20 #Javascript
JS实现仿Windows经典风格的选项卡Tab切换代码
Oct 20 #Javascript
JavaScript实现的简单烟花特效代码
Oct 20 #Javascript
require.js的用法详解
Oct 20 #Javascript
JS实现鼠标滑过链接改变网页背景颜色的方法
Oct 20 #Javascript
JS实现带有3D立体感的银灰色竖排折叠菜单代码
Oct 20 #Javascript
You might like
PHP5中MVC结构学习
2006/10/09 PHP
php设计模式  Command(命令模式)
2011/06/17 PHP
php 修改上传文件大小限制实例详解
2016/10/23 PHP
PHP命令空间namespace及use的用法小结
2017/11/27 PHP
pjblog修改技巧汇总
2007/03/12 Javascript
jquery1.4后 jqDrag 拖动 不可用
2010/02/06 Javascript
仿谷歌主页js动画效果实现代码
2013/07/14 Javascript
jquery mobile changepage的三种传参方法介绍
2013/09/13 Javascript
纯js和css实现渐变色包括静态渐变和动态渐变
2014/05/29 Javascript
使用JavaScript实现网页版Pongo设计思路及源代码分享
2014/06/16 Javascript
了不起的node.js读书笔记之node.js中的特性
2014/12/22 Javascript
浅谈javascript语法和定时函数
2015/05/03 Javascript
BootStrap无限级分类(无限极分类封装版)
2016/08/26 Javascript
jquery事件绑定解绑机制源码解析
2016/09/19 Javascript
详解vue 模拟后台数据(加载本地json文件)调试
2017/08/25 Javascript
JS和jQuery通过this获取html标签中的属性值(实例代码)
2017/09/11 jQuery
vue 登录滑动验证实现代码
2018/08/24 Javascript
js实现旋转的星空效果
2019/11/01 Javascript
微信小程序实现横向滚动导航栏效果
2019/12/12 Javascript
Python中利用Scipy包的SIFT方法进行图片识别的实例教程
2016/06/03 Python
python合并同类型excel表格的方法
2018/04/01 Python
python实现Zabbix-API监控
2018/09/17 Python
Python列表常见操作详解(获取,增加,删除,修改,排序等)
2019/02/18 Python
linux查找当前python解释器的位置方法
2019/02/20 Python
在python image 中安装中文字体的实现方法
2019/08/22 Python
Python unittest框架操作实例解析
2020/04/13 Python
财务专业大学生职业生涯规划范文
2013/12/30 职场文书
代理协议书范本
2014/04/22 职场文书
防灾减灾宣传标语
2014/10/07 职场文书
2014年教学管理工作总结
2014/12/02 职场文书
2015年挂职干部工作总结
2015/05/14 职场文书
2015年征兵工作总结
2015/07/23 职场文书
2016党员学习《反对自由主义》心得体会
2016/01/22 职场文书
Python办公自动化解决world文件批量转换
2021/09/15 Python
Win11怎么把合并的任务栏分开 Win11任务栏合并分开教程
2022/04/06 数码科技
《勇者辞职不干了》ED主题曲无字幕动画MV公开
2022/04/13 日漫