js は、テキスト box_javascript スキルをクリックした後にのみ検証コードのサンプルコードをロードします-jsチュートリアル-php.cn

js は、テキスト box_javascript スキルをクリックした後にのみ検証コードのサンプルコードをロードします

WBOY

リリース： 2016-05-16 15:35:51

オリジナル

1650 人が閲覧しました

メッセージを残したり、主要な Web サイトに投稿したりすることが多い友人は、多くの Web サイトのメッセージ領域に確認コードが直接表示されないことを知っておく必要があります。代わりに、確認コード入力ボックスをクリックすると、確認コードが表示されます。以下の著者は、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 を使用してこの効果を実現する方法を見てみましょう。
(1) 1 つ目は、検証コードを生成する PHP ファイルコード (checkCode.php) です。コードがない場合は、次の 2 つの記事を参照してください。コードはここには含まれません。

php 検証コード生成関数
 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コードです。気に入っていただければ幸いです。