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代码，希望大家喜欢。
-
本文向大家介绍jQuery中ztree 点击文本框弹出下拉框的实例代码，包括了jQuery中ztree 点击文本框弹出下拉框的实例代码的使用技巧和注意事项，需要的朋友参考一下 废话不多说了，具体代码如下所示： 以上所述是小编给大家介绍的jQuery中ztree 点击文本框弹出下拉框的实例代码，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！
-
本文向大家介绍JS实现touch 点击滑动轮播实例代码，包括了JS实现touch 点击滑动轮播实例代码的使用技巧和注意事项，需要的朋友参考一下 废话不多说了，直接给大家贴js代码了，具体代码如下所示： 以上所述是小编给大家介绍的JS实现touch 点击滑动轮播实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对呐喊教程网站的支持！
-
本文向大家介绍JS实现文档加载完成后执行代码，包括了JS实现文档加载完成后执行代码的使用技巧和注意事项，需要的朋友参考一下 在执行某些操作的时候，需要当文档完全加载完成之后再去执行，否则可能出现意向不到的情况，先看一段代码实例: 以上代码的初衷是将div的背景颜色设置为#639，但是并未达到我们预期的效果，这是因为文档加载的时候代码是顺序执行的，当执行js的设置背景颜色代码的时候，还没有加载到指定
-
本文向大家介绍js实现点击获取验证码倒计时效果，包括了js实现点击获取验证码倒计时效果的使用技巧和注意事项，需要的朋友参考一下 网站中为了防止恶意获取验证短信、验证邮箱，都会在点击获取验证码的按钮上做个倒计时的效果。实现这个功能，一个setInterval和一个clearInterval就能搞定了，不需要太多的代码。实例效果和代码如下： 更多关于倒计时的文章请查看专题：《倒计时功能》 利用setI
-
本文向大家介绍Ajax+Struts2实现验证码验证功能实例代码，包括了Ajax+Struts2实现验证码验证功能实例代码的使用技巧和注意事项，需要的朋友参考一下 众所周知，验证码在我们的生活中都是非常常见的，很多公司都在各种折腾各种各样的验证码，这里简要的用一个小案例来实现验证码的功能（ps:其实我挺讨厌验证码这个东西的）。 今天分享的是通过ajax来动态的验证验证码输入是否正确。我们这里采用的
-
本文向大家介绍PHP生成图片验证码、点击切换实例，包括了PHP生成图片验证码、点击切换实例的使用技巧和注意事项，需要的朋友参考一下 这里来看下效果: 现在让我们来看下 PHP 代码 接下来只要在页面中调用就可以了: 如果想实现 "看不清？换一张" 效果，添加如下 JS 到页面中