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 相关文章推荐
Javascript 二维数组
Nov 26 Javascript
初识JQuery 实例一(first)
Mar 16 Javascript
关于JavaScript的with 语句的使用方法
May 09 Javascript
在IE浏览器中resize事件执行多次的解决方法
Jul 12 Javascript
JQuery获取与设置HTML元素的内容或文本的实现代码
Jun 20 Javascript
DOM节点删除函数removeChild()用法实例
Jan 12 Javascript
jQuery的几个我们必须了解的特点
May 03 Javascript
JavaScrpt中如何使用 cookie 设置查看与删除功能
Jul 09 Javascript
vue项目中使用axios上传图片等文件操作
Nov 02 Javascript
浅谈JavaScript闭包
Apr 09 Javascript
在vue中封装方法以及多处引用该方法详解
Aug 14 Javascript
小程序实现列表倒计时功能
Jan 29 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
一拳超人中怪人协会钦定! S级别最强四人!
2020/03/02 日漫
PHP缓存技术的多种方法小结
2012/08/14 PHP
PHP禁止个别IP访问网站
2013/10/30 PHP
PHP动态柱状图实现方法
2015/03/30 PHP
Yii框架引入coreseek分页功能示例
2019/02/08 PHP
PHP设计模式(五)适配器模式Adapter实例详解【结构型】
2020/05/02 PHP
动态样式类封装JS代码
2009/09/02 Javascript
Javascript isArray 数组类型检测函数
2009/10/08 Javascript
奉献给JavaScript初学者的编写开发的七个细节
2011/01/11 Javascript
浅析JS刷新框架中的其他页面 &amp;&amp; JS刷新窗口方法汇总
2013/07/08 Javascript
Javscript删除数组中指定元素并返回新数组
2014/03/06 Javascript
实现js保留小数点后N位的代码
2014/11/13 Javascript
js生成验证码并直接在前端判断
2015/05/15 Javascript
jQuery实现获取绑定自定义事件元素的方法
2015/12/02 Javascript
JavaScript+html5 canvas制作的百花齐放效果完整实例
2016/01/26 Javascript
jQuery点击弹出层弹出模态框点击模态框消失代码分享
2017/01/21 Javascript
JS实现浏览器打印、打印预览示例
2017/02/28 Javascript
JS 插件dropload下拉刷新、上拉加载使用小结
2017/04/13 Javascript
javascript简写常用的12个技巧(可以大大减少你的js代码量)
2020/03/28 Javascript
vue如何使用 Slot 分发内容实例详解
2017/09/05 Javascript
使用InstantClick.js让页面提前加载200ms
2017/09/12 Javascript
详解React Native 采用Fetch方式发送跨域POST请求
2017/11/15 Javascript
NodeJs入门教程之定时器和队列
2019/03/08 NodeJs
layui-table表复选框勾选的所有行数据获取的例子
2019/09/13 Javascript
Vue实现点击按钮复制文本内容的例子
2019/11/09 Javascript
vue 组件基础知识总结
2021/01/26 Vue.js
opencv实现图片模糊和锐化操作
2018/11/19 Python
Python使用pyserial进行串口通信的实例
2019/07/02 Python
Python 2种方法求某个范围内的所有素数(质数)
2020/01/31 Python
python如何求100以内的素数
2020/05/27 Python
python怎么调用自己的函数
2020/07/01 Python
系统管理员的职责包括那些?管理的对象是什么?
2013/01/18 面试题
上市公司董事长岗位职责
2015/04/16 职场文书
解决Django transaction进行事务管理踩过的坑
2021/04/24 Python
Java的Object类的九种方法
2022/04/13 Java/Android
Spring Boot 实现 WebSocket
2022/04/30 Java/Android