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 相关文章推荐
js对象之JS入门之Array对象操作小结
Jan 09 Javascript
基于JQuery实现鼠标点击文本框显示隐藏提示文本
Feb 23 Javascript
javascript 弹出的窗口返回值给父窗口具体实现
Nov 23 Javascript
js判断客户端是iOS还是Android等移动终端的方法
Dec 11 Javascript
javascript实现动态导入js与css等静态资源文件的方法
Jul 25 Javascript
jquery特效 点击展示与隐藏全文
Dec 09 Javascript
Vue.js基础学习之class与样式绑定
Mar 20 Javascript
vue在手机中通过本机IP地址访问webApp的方法
Aug 15 Javascript
从零开始搭建vue移动端项目到上线的步骤
Oct 15 Javascript
基于JS抓取某高校附近共享单车位置 使用web方式展示位置变化代码实例
Aug 27 Javascript
JQuery基于FormData异步提交数据文件
Sep 01 jQuery
浅谈Vue的computed计算属性
Mar 21 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
Flash空降上海 化身大魔王接受挑战
2020/03/02 星际争霸
phpBB BBcode处理的漏洞
2006/10/09 PHP
PHP页面实现定时跳转的方法
2014/10/31 PHP
快速解决PHP调用Word组件DCOM权限的问题
2017/12/27 PHP
点图片上一页下一页翻页效果
2008/07/09 Javascript
用jQuery打造TabPanel效果代码
2010/05/22 Javascript
改进版通过Json对象实现深复制的方法
2012/10/24 Javascript
浅析ajax请求json数据并用js解析(示例分析)
2013/07/13 Javascript
jQuery 文本框得失焦点的简单实例
2014/02/19 Javascript
详解微信小程序中的页面代码中的模板的封装
2017/10/12 Javascript
JavaScript实现随机数生成器(去重)
2017/10/13 Javascript
Vue v2.4中新增的$attrs及$listeners属性使用教程
2018/01/08 Javascript
vue项目使用.env文件配置全局环境变量的方法
2019/10/24 Javascript
[03:52]DOTA2英雄基础教程 酒仙
2013/12/23 DOTA
[10:42]Team Liquid Vs Newbee
2018/06/07 DOTA
python中json格式数据输出的简单实现方法
2016/10/31 Python
python版简单工厂模式
2017/10/16 Python
python+opencv实现动态物体追踪
2018/01/09 Python
这可能是最好玩的python GUI入门实例(推荐)
2019/07/19 Python
如何使用Python发送HTML格式的邮件
2020/02/11 Python
利用Python裁切tiff图像且读取tiff,shp文件的实例
2020/03/10 Python
完美解决keras 读取多个hdf5文件进行训练的问题
2020/07/01 Python
社区版pycharm创建django项目的方法(pycharm的newproject左侧没有项目选项)
2020/09/23 Python
用python对excel查重
2020/12/07 Python
使用Python提取文本中含有特定字符串的方法示例
2020/12/09 Python
Scrapy+Selenium自动获取cookie爬取网易云音乐个人喜爱歌单
2021/02/01 Python
以下为Windows NT 下的32 位C++程序,请计算sizeof 的值
2016/12/07 面试题
高中军训感想300字
2014/03/04 职场文书
院领导写的就业推荐信
2014/03/09 职场文书
应届生求职自荐信
2014/07/04 职场文书
老龄工作先进事迹
2014/08/15 职场文书
2015新生加入学生会自荐书
2015/03/24 职场文书
公司行政主管岗位职责
2015/04/09 职场文书
2015年小学图书室工作总结
2015/05/18 职场文书
《为人民服务》教学反思
2016/02/20 职场文书
关于golang高并发的实现与注意事项说明
2021/05/08 Golang