點擊文字框後才載入驗證碼的JS代碼

來源:互聯網
上載者:User

經常到各大網站去留言或者發帖的朋友應該知道現在很多網站的留言地方的驗證碼不是直接顯示的。而是在點擊驗證碼輸入框之後才會顯示出來驗證碼的。下面作者也總結了一篇關於如何利用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"  value=""  /></span><span >6253</span></body></html>

以上這個就非常的簡單了,其實比較流行且實用的應該是ajax形式的,下面來看看使用ajax實現這個效果的方法吧。

(1)首先是產生驗證碼的php檔案代碼(checkCode.php),沒有的可以參照下面兩篇文章,這裡就不放代碼了。

php產生驗證碼函數
php產生動態驗證碼圖片

(2)具體html檔案及處理代碼如下:

<html xmlns="http://www.Alixixi.com/javascript-function/661.html"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>點擊文字框後才載入驗證碼的JS程式碼範例</title><script type="text/javascript" src="http://www.Alixixi.com/js/jquery.js"></script><script type="text/javascript">$(function(){$('#Alixixi').focus(function(){$('#checkCode').html('<img src="http://www.Alixixi.com/web_include/checkcode.php" />');});});</script></head><body><span><input type="text" size="20"  value="" /></span><span ></span></body></html>


相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。