Rumah > Artikel > hujung hadapan web > Cara menggunakan JavaScript untuk memasukkan gesaan dalam kotak teks (kotak kata laluan)_kemahiran javascript

Cara menggunakan JavaScript untuk memasukkan gesaan dalam kotak teks (kotak kata laluan)_kemahiran javascript

WBOYasal: 2016-05-16 15:23:221635semak 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.softwhy.com/" />
<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.

Kandungan di atas adalah pengetahuan yang dikongsi oleh editor tentang cara melaksanakan gesaan dalam kotak kata laluan menggunakan JavaScript. Saya harap anda akan 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：Memahami Kalah Mati dan cara menggunakan Kalah Mati untuk mengikat kemahiran context_javascriptArtikel seterusnya：Memahami Kalah Mati dan cara menggunakan Kalah Mati untuk mengikat kemahiran context_javascript

Artikel berkaitan

Lihat lagi