Rumah > Artikel > hujung hadapan web > js hanya memuatkan kod contoh kod pengesahan selepas mengklik kemahiran kotak teks_javascript

js hanya memuatkan kod contoh kod pengesahan selepas mengklik kemahiran kotak teks_javascript

WBOYasal: 2016-05-16 15:35:511573semak imbas

Rakan yang sering meninggalkan mesej atau menyiarkan di tapak web utama harus tahu bahawa kod pengesahan tidak dipaparkan secara langsung di kawasan mesej banyak tapak web. Sebaliknya, kod pengesahan akan dipaparkan selepas mengklik kotak input kod pengesahan. Penulis di bawah juga meringkaskan artikel tentang cara menggunakan js untuk mencapai kesan mengklik pada kotak teks dan kemudian memuatkan kod pengesahan.
Tanpa berlengah lagi, berikut ialah kod pelaksanaan khusus.

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

Perkara di atas adalah sangat mudah. Malah, yang lebih popular dan praktikal ialah bentuk ajax Mari kita lihat kaedah menggunakan ajax untuk mencapai kesan ini.
(1) Yang pertama ialah kod fail PHP (checkCode.php) yang menjana kod pengesahan Jika anda tidak memilikinya, anda boleh merujuk kepada dua artikel berikut Kod tersebut tidak akan disertakan di sini.

php menjana fungsi kod pengesahan
php menjana imej kod pengesahan dinamik

(2) Fail html khusus dan kod pemprosesan adalah seperti berikut:

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

Di atas adalah kod JS untuk memuatkan kod pengesahan selepas mengklik pada kotak teks saya harap anda menyukainya.

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：JS melaksanakan kemahiran menu pembesaran dinamik kesan Fisheye code_javascriptArtikel seterusnya：JS melaksanakan kemahiran menu pembesaran dinamik kesan Fisheye code_javascript

Artikel berkaitan

Lihat lagi