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 相关文章推荐
用tip解决Ext列宽度不够的问题
Dec 13 Javascript
JavaScript中具名函数的多种调用方式总结
Nov 08 Javascript
JS+CSS实现模仿浏览器网页字符查找功能的方法
Feb 26 Javascript
使用JavaScript实现连续滚动字幕效果的方法
Jul 07 Javascript
jquery实现网站列表切换效果的2种方法
Aug 12 Javascript
js通过指定下标或指定元素进行删除数组的实例
Jan 12 Javascript
js实现可以点击收缩或张开的悬浮窗
Sep 18 Javascript
浅谈ES6 模板字符串的具体使用方法
Nov 07 Javascript
JavaScript动态加载重复绑定问题
Apr 01 Javascript
小程序红包雨的实现示例
Feb 19 Javascript
bootstrap tooltips在 angularJS中的使用方法
Apr 10 Javascript
vue+iview实现文件上传
Nov 17 Vue.js
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 小乘法表实现代码
2009/07/16 PHP
PHP数据库调用类调用实例(详细注释)
2012/07/12 PHP
yii2 commands模式以及配置crontab定时任务的方法
2017/08/19 PHP
laravel实现Auth认证,登录、注册后的页面回跳方法
2019/09/30 PHP
TP5框架实现签到功能的方法分析
2020/04/05 PHP
网络图片延迟加载实现代码 超越jquery控件
2010/03/27 Javascript
Javascript中使用A标签获取当前目录的绝对路径方法
2015/03/02 Javascript
解决JS无法调用Controller问题的方法
2015/12/31 Javascript
javascript计时器编写过程与实现方法
2016/02/29 Javascript
纯原生js实现table表格的增删
2017/01/05 Javascript
vue.js 上传图片实例代码
2017/06/22 Javascript
浅析Javascript中双等号(==)隐性转换机制
2017/10/27 Javascript
Node.js使用Express.Router的方法
2017/11/14 Javascript
Vue.JS项目中5个经典Vuex插件
2017/11/28 Javascript
js实现延迟加载的几种方法详解
2019/01/19 Javascript
js中let能否完全替代IIFE
2019/06/15 Javascript
浅谈监听单选框radio改变事件(和layui中单选按钮改变事件)
2019/09/10 Javascript
浅谈vuex中store的命名空间
2019/11/08 Javascript
浅析JavaScript中的事件委托机制跟深浅拷贝
2021/01/20 Javascript
Python 正则表达式的高级用法
2016/12/04 Python
使用Django连接Mysql数据库步骤
2019/01/15 Python
python 实现selenium断言和验证的方法
2019/02/13 Python
python利用datetime模块计算程序运行时间问题
2020/02/20 Python
Python文件名匹配与文件复制的实现
2020/12/11 Python
基于pycharm 项目和项目文件命名规则的介绍
2021/01/15 Python
法国一家多品牌成衣精品中/高档商店:Graduate Store
2019/08/28 全球购物
保健品市场营销方案
2014/03/31 职场文书
父母对孩子的寄语
2014/04/09 职场文书
酒店开业策划方案
2014/06/02 职场文书
高职教师先进事迹材料
2014/08/24 职场文书
党员个人批评与自我批评
2014/10/14 职场文书
大学生就业推荐表自我评价
2015/03/02 职场文书
团队拓展训练感想
2015/08/07 职场文书
2016年大学迎新工作总结
2015/10/14 职场文书
用python批量解压带密码的压缩包
2021/05/31 Python
css3中2D转换之有趣的transform形变效果
2022/02/24 HTML / CSS