suchen

Heim  >  Artikel  >  Web-Frontend  >  js lädt den Beispielcode für den Verifizierungscode erst, nachdem Sie auf den Text box_javascript skills geklickt haben

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

WBOY
WBOYOriginal
2016-05-16 15:35:511610Durchsuche

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>


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>

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

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：JS implementiert Code_Javascript-Fähigkeiten für das dynamische Vergrößerungsmenü des FischaugeneffektsNächster Artikel：JS implementiert Code_Javascript-Fähigkeiten für das dynamische Vergrößerungsmenü des Fischaugeneffekts

In Verbindung stehende Artikel

Mehr sehen