Node.js는 텍스트 상자_javascript 기술을 클릭한 후에만 인증 코드 예제 코드를 로드합니다.
- WBOY원래의
- 2016-05-16 15:35:511573검색
주요 웹사이트에 자주 메시지를 남기거나 게시물을 올리는 친구는 인증 코드가 많은 웹사이트의 메시지 영역에 직접 표시되지 않는다는 점을 알아야 합니다. 대신, 인증코드 입력란을 클릭하면 인증코드가 표시됩니다. 아래 작성자는 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 코드입니다.
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.