masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > tutorial js > teks badan

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

WBOY
Lepaskan： 2016-05-16 15:20:39
asal
2310 orang telah melayarinya

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>
Salin selepas log masuk

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.

Label berkaitan：
js实现输入框提示 javascript提示框
sumber：php.cn
Artikel sebelumnya：Contoh pengesahan borang JavaScript untuk mengesahkan sama ada item borang adalah kemahiran empty_javascript Artikel seterusnya：JavaScript model undur jam elektronik 2_kemahiran javascript
Kenyataan Laman Web ini
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 terbaru oleh pengarang
Isu terkini
Tambahkan nilai tambahan pada medan data format yang dipaparkan menggunakan javascript Saya cuba mencapai ini: Saya ingin mencipta borang yang mengumpul data yang dimasukkan ole...
daripada 2024-04-04 15:17:13
0
1
3589
Bagaimanakah saya boleh membuat imej muncul di tengah-tengah pengepala? Pertama sekali, kod saya adalah berdasarkan 3 fail, HTML, CSS dan JS Perlu diingatkan baha...
daripada 2024-04-01 23:49:58
0
1
372
Mahu menunjukkan kotak semak untuk setiap baris Pada masa ini, dalam laman web pejabat kami, terdapat kotak teks input pengguna, dan apabi...
daripada 2024-04-01 12:34:11
0
2
255
Apabila acara pemilihan berubah, animasi CSS mencetuskan kesan yang sepadan. Saya cuba membuat aplikasi React, sekarang saya mempunyai kotak input pilih dengan beberap...
daripada 2024-04-01 09:16:28
0
1
350
Tatasusunan dalam PHP: hasil yang mengejutkan apabila menambah item baharu Jadi saya sedang menulis kod yang membolehkan saya mengumpul imej yang dikumpul oleh perpu...
daripada 2024-03-31 14:10:42
0
1
405
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan