js點(diǎn)擊文本框后才加載驗(yàn)證碼實(shí)例代碼

更新時(shí)間：2015年10月20日 14:48:18 投稿：lijiao

這篇文章是一段關(guān)于js點(diǎn)擊文本框后才加載驗(yàn)證碼實(shí)例代碼，而不是直接顯示驗(yàn)證碼，感興趣的小伙伴們可以參考一下

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

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>點(diǎn)擊文本框后才加載驗(yàn)證碼的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>

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

php生成驗(yàn)證碼函數(shù)
php生成動(dòng)態(tài)驗(yàn)證碼圖片

（2）具體html文件及處理代碼如下：

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>點(diǎn)擊文本框后才加載驗(yàn)證碼的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>

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

您可能感興趣的文章:

相關(guān)文章

實(shí)例分析Array.from(arr)與[...arr]到底有何不同
這篇文章通過實(shí)例主要給大家分析介紹了關(guān)于Array.from(arr)與[...arr]到底有何不同的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用js具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
BootStrapTable服務(wù)器分頁實(shí)例解析
項(xiàng)目中經(jīng)常會(huì)使用到表格，數(shù)據(jù)量大的時(shí)候還需要進(jìn)行分頁，項(xiàng)目設(shè)計(jì)階段，我選擇了bootstrapTable的js插件，個(gè)人覺得這個(gè)框架非常好用，支持服務(wù)器端分頁，此篇主要寫的主要是關(guān)于服務(wù)器分頁,需要的朋友可以參考下
2016-12-12
JavaScript創(chuàng)建防篡改對(duì)象的方法分析
這篇文章主要介紹了JavaScript創(chuàng)建防篡改對(duì)象的方法,結(jié)合具體實(shí)例形式分析了javascript基于不可擴(kuò)展對(duì)象、密封的對(duì)象和凍結(jié)的對(duì)象實(shí)現(xiàn)防篡改對(duì)象的相關(guān)操作技巧,需要的朋友可以參考下
2018-12-12
JavaScript實(shí)現(xiàn)數(shù)組元素增減的方法示例
數(shù)組元素的增刪是JavaScript的一個(gè)特點(diǎn),因?yàn)槠渌芏嗑幊陶Z言的數(shù)組是不允許增加或者刪除元素的,本文給大家介紹了JavaScript實(shí)現(xiàn)數(shù)組元素增減的方法示例,文中有相關(guān)的代碼示例供大家參考,需要的朋友可以參考下
2024-07-07
JavaScript實(shí)現(xiàn)MD5加密的六種方式實(shí)例
這篇文章主要給大家介紹了關(guān)于JavaScript實(shí)現(xiàn)MD5加密的六種方式,在JS中可以實(shí)現(xiàn)MD5加密算法,可以使用第三方庫或者自己編寫代碼實(shí)現(xiàn),需要的朋友可以參考下
2023-09-09
JS如何實(shí)現(xiàn)在彈出窗口中加載頁面
這篇文章主要介紹了JS如何實(shí)現(xiàn)在彈出窗口中加載頁面,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-12-12
Javascript中查找不以XX字符結(jié)尾的單詞示例代碼
我在寫這篇文章之前花了2個(gè)多小時(shí)在弄正則表達(dá)式，下為大家介紹下具體的實(shí)現(xiàn)思路，感興趣的朋友可以參考下
2013-10-10
JSscript標(biāo)簽有哪些屬性
本文介紹了JSscript標(biāo)簽有哪些屬性,向HTML頁面中插入JavaScript的主要方法,就是使用script>元素.這個(gè)元素由Netscape創(chuàng)造并在NetscapeNavigator2中首先實(shí)現(xiàn).后來,這個(gè)元素被加入到正式的HTML規(guī)范中,下面小編來講解下JSscript標(biāo)簽有哪些屬性,需要的朋友可以參考下
2022-01-01
基于JavaScript實(shí)現(xiàn)圖片裁剪功能
在前端開發(fā)中，當(dāng)遇到圖片或頭像上傳等功能時(shí)，有尺寸分辨率限制的話，就需要用到圖片的裁剪功能。本文為大家介紹了JavaScript實(shí)現(xiàn)圖片裁剪功能的示例代碼，希望對(duì)大家有所幫助
2023-02-02
bootstrap按鈕插件（Button）使用方法解析
這篇文章主要為大家詳細(xì)解析了bootstrap按鈕插件Button使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-01-01