js lädt den Beispielcode für den Verifizierungscode erst, nachdem Sie auf den Text box_javascript skills geklickt haben-js-Tutorial-php.cn

js lädt den Beispielcode für den Verifizierungscode erst, nachdem Sie auf den Text box_javascript skills geklickt haben

WBOY

Freigeben： 2016-05-16 15:35:51

Original

1609 Leute haben es durchsucht

Freunde, die häufig Nachrichten hinterlassen oder auf großen Websites posten, sollten wissen, dass die Bestätigungscodes nicht direkt in den Nachrichtenbereichen vieler Websites angezeigt werden. Stattdessen wird der Bestätigungscode angezeigt, nachdem Sie auf das Eingabefeld für den Bestätigungscode geklickt haben. Der folgende Autor fasst auch einen Artikel darüber zusammen, wie man mit js den Effekt erzielt, auf das Textfeld zu klicken und dann den Bestätigungscode zu laden.
Hier ist ohne weiteres der spezifische Implementierungscode.

<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>

Nach dem Login kopieren

Das Obige ist sehr einfach. Die beliebtere und praktischere Variante ist die Ajax-Form. Schauen wir uns die Methode zur Verwendung von Ajax an, um diesen Effekt zu erzielen.
(1) Der erste ist der PHP-Dateicode (checkCode.php), der den Bestätigungscode generiert. Wenn Sie ihn nicht haben, können Sie auf die folgenden beiden Artikel verweisen.

PHP-Funktion zum Generieren eines Bestätigungscodes
PHP generiert ein dynamisches Verifizierungscodebild

(2) Die spezifische HTML-Datei und der Verarbeitungscode lauten wie folgt:

<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>

Nach dem Login kopieren

Das Obige ist der JS-Code zum Laden des Bestätigungscodes nach dem Klicken auf das Textfeld. Ich hoffe, er gefällt Ihnen.