js点击文本框后才加载验证码实例代码
时间：2021-07-12 13:29:52|栏目：JavaScript代码|点击： 次
经常到各大网站去留言或者发帖的朋友应该知道现在很多网站的留言地方的验证码不是直接显示的。而是在点击验证码输入框之后才会显示出来验证码的。下面作者也总结了一篇关于如何利用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），没有的可以参照下面两篇文章，这里就不放代码了。
（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代码，希望大家喜欢。
上一篇：iOS和Android用同一个二维码实现跳转下载链接的方法
栏 目：JavaScript代码
下一篇：超酷的鼠标拖拽翻页(分页)效果实现javascript代码
本文标题：js点击文本框后才加载验证码实例代码
本文地址：http://www.codeinn.net/misctech/156273.html
