Node.js는 텍스트 상자_javascript 기술을 클릭한 후에만 인증 코드 예제 코드를 로드합니다.-JS 튜토리얼-php.cn

Node.js는 텍스트 상자_javascript 기술을 클릭한 후에만 인증 코드 예제 코드를 로드합니다.

WBOY

풀어 주다： 2016-05-16 15:35:51

원래의

1640명이 탐색했습니다.

주요 웹사이트에 자주 메시지를 남기거나 게시물을 올리는 친구는 인증 코드가 많은 웹사이트의 메시지 영역에 직접 표시되지 않는다는 점을 알아야 합니다. 대신, 인증코드 입력란을 클릭하면 인증코드가 표시됩니다. 아래 작성자는 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" id="phpernote" value="" onClick="loadCheckCode()" /></span><span id="checkCode">6253</span> 
</body> 
</html>

로그인 후 복사

위의 내용은 매우 간단합니다. 사실 더 대중적이고 실용적인 것은 ajax 형식입니다. 이 효과를 얻기 위해 ajax를 사용하는 방법을 살펴보겠습니다.
(1) 첫 번째는 인증 코드를 생성하는 PHP 파일 코드(checkCode.php)가 없는 경우 여기에 코드가 포함되지 않습니다.

php 인증코드 생성 기능
php가 동적 인증 코드 이미지를 생성합니다

(2) 구체적인 html 파일과 처리 코드는 다음과 같습니다.

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

로그인 후 복사

위 내용은 텍스트 상자를 클릭한 후 인증 코드를 로드하는 JS 코드입니다.