jQuery点击输入框显示验证码图片


Posted in Javascript onMay 19, 2016

先看效果图:

jQuery点击输入框显示验证码图片

要求:当输入框获得焦点时,自动显示验证图片。

代码如下(学习而已,仅供参考):

/***********************下是验证码对象*****************/
var Validation = {};
Validation.init = function(eleName,imageSrc){
  this.image = imageSrc;
  $('#'+eleName).focusin(function(){
    Validation.show(eleName);
  });
}

Validation.image = '';
Validation.display=false;
Validation.width = '100px';
Validation.height = '30px';
Validation.div = null;
Validation.show = function(eleName){
  if(this.display==false){
    //首次显示
    if(this.div==null){
      $('#'+eleName).after('<div style="display:none;" id="div_validation_'+eleName+'" title="点击更换"></div>');
      this.div = $('#div_validation_'+eleName);
      this.div.css('position','absolute');
      this.div.css('cursor','pointer');
      this.div.css('border','1px solid #CCC');
      this.div.css('background-color','#FFF');
      this.div.css('background-position','center');
      this.div.css('background-repeat','no-repeat');
      this.div.css('height',this.height);
      this.div.css('width',this.width);
      var objOffset = $('#'+eleName).offset();
      objOffset.top+=$('#'+eleName).height()+6;
      this.div.offset(objOffset);
      this.div.css('background-image','url('+Validation.image+'&_t='+new Date()+')');
      this.div.css('display','inline-block');
      this.display = true;
      //点击更换
      this.div.click(function(){
        Validation.div.css('background-image','url('+Validation.image+'&_t='+new Date()+')');
      });
    }
    else{
      this.div.css('background-image','url('+Validation.image+'&_t='+new Date()+')');
      this.display = true;
      this.div.css('display','inline-block');
    }
  }
}
Validation.hide =function(){
  if(this.display==true){
    this.display = false;
    this.div.hide();
  }
}

使用方式:

//验证码对象初始化
Validation.init('validation','Ajax.ashx?handle=validation');
//      输入框ID    验证图片地址 

//隐藏
Validation.hide();

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
如何从jQuery的ajax请求中删除X-Requested-With
Dec 11 Javascript
angularJS中router的使用指南
Feb 09 Javascript
javascript图片滑动效果实现
Jan 28 Javascript
jQuery EasyUI 布局之动态添加tabs标签页
Nov 18 Javascript
jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)
Dec 31 Javascript
详解JavaScript的另类写法
Apr 11 Javascript
jquery mobile移动端幻灯片滑动切换效果
Apr 15 Javascript
微信小程序 图片边框解决方法
Jan 16 Javascript
微信小程序实现带参数的分享功能(两种方法)
May 17 Javascript
package.json配置文件构成详解
Aug 27 Javascript
压缩Vue.js打包后的体积方法总结(Vue.js打包后体积过大问题)
Feb 03 Javascript
解决vue-pdf查看pdf文件及打印乱码的问题
Nov 04 Javascript
Bootstrap教程JS插件滚动监听学习笔记分享
May 18 #Javascript
Node.js刷新session过期时间的实现方法推荐
May 18 #Javascript
JS+Canvas 实现下雨下雪效果
May 18 #Javascript
如何判断Javascript对象是否存在的简单实例
May 18 #Javascript
jquery遍历json对象集合详解
May 18 #Javascript
深入理解JavaScript中的对象复制(Object Clone)
May 18 #Javascript
js验证框架实现代码分享
May 18 #Javascript
You might like
学习discuz php 引入文件的方法DISCUZ_ROOT
2009/06/21 PHP
php与php MySQL 之间的关系
2009/07/17 PHP
详解WordPress中添加和执行动作的函数使用方法
2015/12/29 PHP
基于jquery的自定义鼠标提示效果 jquery.toolTip
2010/11/14 Javascript
纯js网页画板(Graphics)类简介及实现代码
2012/12/24 Javascript
Extjs4中Form的使用之本地hiddenfield
2013/11/26 Javascript
jQuery实现可收缩展开的级联菜单实例代码
2013/11/27 Javascript
关于js中for in的缺陷浅析
2013/12/02 Javascript
javascript对JSON数据排序的3个例子
2014/04/12 Javascript
JavaScript中最简洁的编码html字符串的方法
2014/10/11 Javascript
jquery制作 随机弹跳的小球特效
2015/02/01 Javascript
jQuery实现输入框下拉列表树插件特效代码分享
2015/08/27 Javascript
深入理解js数组的sort排序
2016/05/28 Javascript
JS实现数字格式千分位相互转换方法
2016/08/01 Javascript
利用bootstrapValidator验证UEditor
2016/09/14 Javascript
JS使用面向对象技术实现的tab选项卡效果示例
2017/02/28 Javascript
JavaScript下拉菜单功能实例代码
2017/03/01 Javascript
微信小程序开发入门基础教程
2017/04/19 Javascript
ECMAscript 变量作用域总结概括
2017/08/18 Javascript
使用jquery+iframe做一个ajax上传效果(实例)
2017/08/24 jQuery
js实现canvas图片与img图片的相互转换的示例
2017/08/31 Javascript
vue 将多个过滤器封装到一个文件中的代码详解
2020/09/05 Javascript
Python实现的多线程端口扫描工具分享
2015/01/21 Python
解决python中使用plot画图,图不显示的问题
2018/07/04 Python
python实现单链表中删除倒数第K个节点的方法
2018/09/28 Python
Django Admin中增加导出CSV功能过程解析
2019/09/04 Python
IE10 Error.stack 让脚本调试更加方便快捷
2013/04/22 HTML / CSS
构造方法和其他方法的区别
2016/04/26 面试题
安全生产承诺书
2014/03/26 职场文书
《明天,我们毕业》教学反思
2014/04/24 职场文书
加油口号大全
2014/06/13 职场文书
专业技术职务聘任证明
2015/03/02 职场文书
pytorch中的numel函数用法说明
2021/05/13 Python
关于JavaScript回调函数的深入理解
2021/06/27 Javascript
tomcat的catalina.out日志按自定义时间格式进行分割的操作方法
2022/04/02 Servers
PYTHON基于Pyecharts绘制常见的直角坐标系图表
2022/04/28 Python