經(jīng)常到各大網(wǎng)站去留言或者發(fā)帖的朋友應(yīng)該知道現(xiàn)在很多網(wǎng)站的留言地方的驗證碼不是直接顯示的。而是在點擊驗證碼輸入框之后才會顯示出來驗證碼的。下面作者也總結(jié)了一篇關(guān)于如何利用js實現(xiàn)點擊文本框然后再加載驗證碼的效果的。
廢話不多說了，下面是具體的實現(xiàn)代碼。

<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>

以上這個就非常的簡單了，其實比較流行且實用的應(yīng)該是ajax形式的，下面來看看使用ajax實現(xiàn)這個效果的方法吧。
（1）首先是生成驗證碼的php文件代碼（checkCode.php），沒有的可以參照下面兩篇文章，這里就不放代碼了。

php生成驗證碼函數(shù)
php生成動態(tài)驗證碼圖片

（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>

以上就是實現(xiàn)點擊文本框后才加載驗證碼的JS代碼，希望大家喜歡。

您可能感興趣的文章: