脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js验证码

js点击文本框后才加载验证码实例代码

 更新时间：2015年10月20日 14:48:18   投稿：lijiao  
这篇文章是一段关于js点击文本框后才加载验证码实例代码，而不是直接显示验证码，感兴趣的小伙伴们可以参考一下

经常到各大网站去留言或者发帖的朋友应该知道现在很多网站的留言地方的验证码不是直接显示的。而是在点击验证码输入框之后才会显示出来验证码的。下面作者也总结了一篇关于如何利用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代码，希望大家喜欢。

您可能感兴趣的文章:

相关文章

  • 实例分析Array.from(arr)与[...arr]到底有何不同

    实例分析Array.from(arr)与[...arr]到底有何不同

    这篇文章通过实例主要给大家分析介绍了关于Array.from(arr)与[...arr]到底有何不同的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用js具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
    2019-04-04
  • BootStrapTable服务器分页实例解析

    BootStrapTable服务器分页实例解析

    项目中经常会使用到表格，数据量大的时候还需要进行分页，项目设计阶段，我选择了bootstrapTable的js插件，个人觉得这个框架非常好用，支持服务器端分页，此篇主要写的主要是关于服务器分页,需要的朋友可以参考下
    2016-12-12
  • JavaScript创建防篡改对象的方法分析

    JavaScript创建防篡改对象的方法分析

    这篇文章主要介绍了JavaScript创建防篡改对象的方法,结合具体实例形式分析了javascript基于不可扩展对象、密封的对象和冻结的对象实现防篡改对象的相关操作技巧,需要的朋友可以参考下
    2018-12-12
  • JavaScript实现数组元素增减的方法示例

    JavaScript实现数组元素增减的方法示例

    数组元素的增删是JavaScript的一个特点,因为其他很多编程语言的数组是不允许增加或者删除元素的,本文给大家介绍了JavaScript实现数组元素增减的方法示例,文中有相关的代码示例供大家参考,需要的朋友可以参考下
    2024-07-07
  • JavaScript实现MD5加密的六种方式实例

    JavaScript实现MD5加密的六种方式实例

    这篇文章主要给大家介绍了关于JavaScript实现MD5加密的六种方式,在JS中可以实现MD5加密算法,可以使用第三方库或者自己编写代码实现,需要的朋友可以参考下
    2023-09-09
  • JS如何实现在弹出窗口中加载页面

    JS如何实现在弹出窗口中加载页面

    这篇文章主要介绍了JS如何实现在弹出窗口中加载页面,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-12-12
  • Javascript中查找不以XX字符结尾的单词示例代码

    Javascript中查找不以XX字符结尾的单词示例代码

    我在写这篇文章之前花了2个多小时在弄正则表达式，下为大家介绍下具体的实现思路，感兴趣的朋友可以参考下
    2013-10-10
  • JSscript标签有哪些属性

    JSscript标签有哪些属性

    本文介绍了JSscript标签有哪些属性,向HTML页面中插入JavaScript的主要方法,就是使用script>元素.这个元素由Netscape创造并在NetscapeNavigator2中首先实现.后来,这个元素被加入到正式的HTML规范中,下面小编来讲解下JSscript标签有哪些属性,需要的朋友可以参考下
    2022-01-01
  • 基于JavaScript实现图片裁剪功能

    基于JavaScript实现图片裁剪功能

    在前端开发中，当遇到图片或头像上传等功能时，有尺寸分辨率限制的话，就需要用到图片的裁剪功能。本文为大家介绍了JavaScript实现图片裁剪功能的示例代码，希望对大家有所帮助
    2023-02-02
  • bootstrap按钮插件（Button）使用方法解析

    bootstrap按钮插件（Button）使用方法解析

    这篇文章主要为大家详细解析了bootstrap按钮插件Button使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-01-01

最新评论