Home > Article > Web Front-end > js only loads the verification code example code after clicking the text box_javascript skills

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

WBOYOriginal: 2016-05-16 15:35:511573browse

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>

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>

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

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：JS implements Fisheye effect dynamic enlargement menu code_javascript skillsNext article：JS implements Fisheye effect dynamic enlargement menu code_javascript skills

See more

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

Related articles