js only loads the verification code example code after clicking the text box

js only loads the verification code example code after clicking the text box_javascript skills

WBOY

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

Original

1616 people have browsed it

Friends who often leave messages or post on major websites should know that the verification codes are not directly displayed in the message areas of many websites. Instead, the verification code will be displayed after clicking the verification code input box. The author below also summarizes an article on how to use js to achieve the effect of clicking on the text box and then loading the verification code.
Without further ado, here is the specific implementation code.

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

Copy after login

The above is very simple. In fact, the more popular and practical one is the ajax form. Let’s take a look at the method of using ajax to achieve this effect.
(1) The first is the PHP file code (checkCode.php) that generates the verification code. If you don’t have it, you can refer to the following two articles. The code will not be included here.

php generate verification code function
php generates dynamic verification code image

(2) The specific html file and processing code are as follows:

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

Copy after login

The above is the JS code to load the verification code after clicking on the text box. I hope you like it.