テキストボックスをクリックした後にのみ認証コードのJSコードが読み込まれます。
頻繁にメッセージを残したり、主要な 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" value="" /></span><span >6253</span> </body> </html>
上記は非常に簡単です。実際、より一般的で実用的なのは ajax 形式です。この効果を実現するための ajax の使用方法を見てみましょう。 。
(1) 1 つ目は、検証コードを生成する PHP ファイルのコード (checkCode.php) がない場合は、以下の 2 つの記事を参照してください。 コードは含まれません。ここ。
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>

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック











HTML の表の境界線に関するガイド。ここでは、HTML でのテーブルの境界線の例を示しながら、テーブル境界線を定義する複数の方法について説明します。

これは、HTML でのネストされたテーブルのガイドです。ここでは、テーブル内にテーブルを作成する方法をそれぞれの例とともに説明します。

HTML マージン左のガイド。ここでは、HTML margin-left の概要とその例、およびそのコード実装について説明します。

HTML テーブル レイアウトのガイド。ここでは、HTML テーブル レイアウトの値と例および出力について詳しく説明します。

HTML 入力プレースホルダーのガイド。ここでは、コードと出力とともに HTML 入力プレースホルダーの例について説明します。

HTML でのテキストの移動に関するガイド。ここでは、概要、マーキー タグが構文でどのように機能するか、および実装例について説明します。

HTML オンクリック ボタンのガイド。ここでは、それらの紹介、動作、例、およびさまざまなイベントでの onclick イベントについてそれぞれ説明します。
