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下对于事件、事件流、事件触发的顺序随便说说
Jul 17 Javascript
禁用JavaScript控制台调试的方法
Mar 07 Javascript
window.location 对象所包含的属性
Oct 10 Javascript
兼容主流浏览器的JS复制内容到剪贴板
Dec 12 Javascript
js实现纯前端的图片预览
Apr 27 Javascript
JS+CSS3实现超炫的散列画廊特效
Jul 16 Javascript
浅谈js之字面量、对象字面量的访问、关键字in的用法
Nov 20 Javascript
利用node.js制作命令行工具方法教程(一)
Jun 22 Javascript
解决JQuery全选/反选第二次失效的问题
Oct 11 jQuery
vue router使用query和params传参的使用和区别
Nov 13 Javascript
js 判断一个数字是不是2的n次方幂的实例
Nov 26 Javascript
JavaScript求一个数组中重复出现次数最多的元素及其下标位置示例
Jul 23 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
php数组函数序列之rsort() - 对数组的元素值进行降序排序
2011/11/02 PHP
教你如何使用php session
2013/10/28 PHP
php禁止浏览器使用缓存页面的方法
2014/11/07 PHP
laravel框架如何设置公共头和公共尾
2019/10/22 PHP
学习ExtJS fit布局使用说明
2009/10/08 Javascript
纯JavaScript实现的完美渐变弹出层效果代码
2010/04/02 Javascript
javascript动态添加表格数据行(ASP后台数据库保存例子)
2010/05/08 Javascript
原生JavaScript生成GUID的实现示例
2014/09/05 Javascript
JQuery实现可直接编辑的表格
2015/04/16 Javascript
javascript实现的多个层切换效果通用函数实例
2015/07/06 Javascript
JavaScript调用浏览器打印功能实例分析
2015/07/17 Javascript
js console.log打印对像与数组用法详解
2016/01/21 Javascript
实例讲解JavaScript中instanceof运算符的用法
2016/06/08 Javascript
移动端 一个简单易懂的弹出框
2016/07/06 Javascript
Javascript es7中比较实用的两个方法示例
2017/07/21 Javascript
Bootstrap modal只加载一次数据的解决办法(推荐)
2017/11/24 Javascript
一个简单的node.js界面实现方法
2018/06/01 Javascript
vue .sync修饰符的使用详解
2018/06/15 Javascript
JavaScript捕捉事件和阻止冒泡事件实例分析
2018/08/03 Javascript
layer弹出层全屏及关闭方法
2018/08/17 Javascript
微信小程序图片左右摆动效果详解
2019/07/13 Javascript
Angular+ionic实现折叠展开效果的示例代码
2020/07/29 Javascript
原生js滑动轮播封装
2020/07/31 Javascript
JavaScript 常见的继承方式汇总
2020/09/17 Javascript
[01:20:37]FNATIC vs NIP 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
在Pycharm中执行scrapy命令的方法
2019/01/16 Python
HTML5 虚拟键盘出现挡住输入框的解决办法
2017/02/14 HTML / CSS
新闻网站实习自我鉴定
2013/09/25 职场文书
缅怀先烈演讲稿
2014/09/03 职场文书
幸福中国演讲稿
2014/09/12 职场文书
干部作风整顿个人剖析材料
2014/10/06 职场文书
员工工作及收入证明
2014/10/28 职场文书
2014离婚协议书范文(3篇)
2014/11/29 职场文书
2016秋季运动会开幕词
2016/03/04 职场文书
2019自荐信该如何写呢?
2019/07/05 职场文书
SQL实现LeetCode(180.连续的数字)
2021/08/04 MySQL