js點擊文字方塊後才載入驗證碼實例程式碼_javascript技巧
- WBOY原創
- 2016-05-16 15:35:511570瀏覽
常到各大網站去留言或發文的朋友應該知道現在很多網站的留言地方的驗證碼不是直接顯示的。而是在點選驗證碼輸入框之後才會顯示出來驗證碼的。以下作者也總結了一篇關於如何利用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程式碼，希望大家喜歡。
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn