ホームページ > 記事 > ウェブフロントエンド > js は、テキスト box_javascript スキルをクリックした後にのみ検証コードのサンプルコードをロードします
js は、テキスト box_javascript スキルをクリックした後にのみ検証コードのサンプルコードをロードします
- WBOYオリジナル
- 2016-05-16 15:35:511570ブラウズ
メッセージを残したり、主要な 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コードです。気に入っていただければ幸いです。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。