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 相关文章推荐
Document 对象的常用方法
Jul 31 Javascript
使用jQuery解决IE与FireFox下createElement方法的差异
Nov 14 Javascript
js获取当前地址 JS获取当前URL的示例代码
Feb 26 Javascript
JQuery EasyUI 数字格式化处理示例
May 05 Javascript
JavaScript中的bold()方法使用详解
Jun 08 Javascript
如何让一个json文件显示在表格里【实现代码】
May 09 Javascript
详解JavaScript对象的深浅复制
Mar 30 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(下)
Apr 21 Javascript
如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
Jul 17 jQuery
基于iScroll实现内容滚动效果
Mar 21 Javascript
react配合antd组件实现的管理系统示例代码
Apr 24 Javascript
vue中三级导航的菜单权限控制
Mar 31 Vue.js
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
PHP中多维数组的foreach遍历示例
2014/06/13 PHP
如何让搜索引擎抓取AJAX内容解决方案
2014/08/25 PHP
PHP图片添加水印功能示例小结
2016/10/03 PHP
基于Laravel实现的用户动态模块开发
2017/09/21 PHP
jquery实现的伪分页效果代码
2015/10/29 Javascript
JS字符串的切分用法实例
2016/02/22 Javascript
老司机带你解读jQuery插件开发流程
2016/05/16 Javascript
jQuery ajax 当async为false时解决同步操作失败的问题
2016/11/18 Javascript
一句jQuery代码实现返回顶部效果(简单实用)
2016/12/28 Javascript
AngularJS通过ng-Img-Crop实现头像截取的示例
2017/08/17 Javascript
vue实现键盘输入支付密码功能
2018/08/18 Javascript
JavaScript实现选项卡效果的分析及步骤
2019/04/16 Javascript
javascript获取select值的方法完整实例
2019/06/20 Javascript
6种JavaScript继承方式及优缺点(小结)
2020/02/06 Javascript
解决vue项目input输入框双向绑定数据不实时生效问题
2020/08/05 Javascript
[01:06:25]Secret vs Liquid 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
[00:18]天涯墨客三技能展示
2018/08/25 DOTA
python xml解析实例详解
2016/11/14 Python
浅谈python脚本设置运行参数的方法
2018/12/03 Python
Django实现发送邮件功能
2019/07/18 Python
python实现多进程通信实例分析
2019/09/01 Python
Pytorch十九种损失函数的使用详解
2020/04/29 Python
Python 带星号(* 或 **)的函数参数详解
2021/02/23 Python
不用游标的SQL语句有哪些
2012/09/07 面试题
UML设计模式笔试题
2014/06/07 面试题
理货员的岗位职责
2013/11/23 职场文书
财会自我鉴定范文
2013/12/27 职场文书
关键在于落实心得体会
2014/09/03 职场文书
2014年教师工作总结
2014/11/10 职场文书
租车协议书范本2014
2014/11/17 职场文书
2014年调度员工作总结
2014/11/19 职场文书
求职自荐信怎么写
2015/03/04 职场文书
少先队工作总结2015
2015/05/13 职场文书
毕业感言怎么写
2015/07/31 职场文书
初一语文教学反思
2016/03/03 职场文书
Go gorilla securecookie库的安装使用详解
2022/08/14 Golang