Rumah > Artikel > hujung hadapan web > JavaScript melaksanakan gesaan dalam kotak input (kotak kata laluan)_kemahiran javascript

JavaScript melaksanakan gesaan dalam kotak input (kotak kata laluan)_kemahiran javascript

WBOYasal: 2016-05-16 15:20:392290semak imbas

Kadang-kadang kita perlu mempunyai beberapa bahasa segera dalam borang log masuk, seperti "Sila masukkan nama pengguna" dan "Sila masukkan kata laluan". seperti "Sila masukkan kata laluan" kelihatan agak menyusahkan, kerana kandungan yang dimasukkan dalam kotak kata laluan tidak akan dipaparkan dalam kod yang jelas. Jika atribut jenis dikawal secara dinamik, akan terdapat isu keserasian Jika input sudah wujud dalam halaman, atribut jenis adalah baca sahaja dalam IE8 dan penyemak imbas di bawah IE8. Jadi saya perlu memikirkan cara lain Kodnya adalah seperti berikut:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.jb51.net/" />
<title>脚本之家</title>
<style type="text/css">
#tx{
width:100px;
}
#pwd{
display:none;
width:100px;
}
</style>
<script type="text/javascript"> 
window.onload=function(){
var tx=document.getElementById("tx");
var pwd=document.getElementById("pwd"); 
tx.onfocus=function(){ 
if(this.value!="密码") 
return; 
this.style.display="none"; 
pwd.style.display="block"; 
pwd.value=""; 
pwd.focus(); 
} 
pwd.onblur=function(){ 
if(this.value!=""){
return; 
} 
this.style.display="none"; 
tx.style.display=""; 
tx.value="密码"; 
} 
}
</script> 
</head> 
<body> 
<input type="text" value="密码" id="tx"/> 
<input type="password" id="pwd" /> 
</body> 
</html>

Kod di atas menyedari keperluan kami. Gesaan yang jelas boleh muncul Apabila memasukkan kata laluan, ia dimasukkan dalam mod kata laluan.

Prinsip pelaksanaan adalah sangat mudah Dalam keadaan lalai, kotak teks dipaparkan dengan jenis="teks". kotak tersembunyi, iaitu baru dibuat pengganti.

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：Contoh pengesahan borang JavaScript untuk mengesahkan sama ada item borang adalah kemahiran empty_javascriptArtikel seterusnya：Contoh pengesahan borang JavaScript untuk mengesahkan sama ada item borang adalah kemahiran empty_javascript

Artikel berkaitan

Lihat lagi