JavaScript memulihkan teks lalai secara automatik selepas mengklik untuk mengosongkan kemahiran box

JavaScript memulihkan teks lalai secara automatik selepas mengklik untuk mengosongkan kemahiran box_javascript teks

WBOY

Lepaskan： 2016-05-16 15:20:40

asal

1426 orang telah melayarinya

Contoh dalam artikel ini memperkenalkan kod contoh js mengklik pada kotak teks untuk mengosongkan teks lalai, meninggalkannya dan kemudian memulihkannya. Ia dikongsi dengan semua orang untuk rujukan anda. Kandungan khusus adalah seperti berikut

Pengetahuan berkaitan:

1. Definisi dan penggunaan acara onclick: Peristiwa ini dicetuskan apabila objek diklik.
Sokongan penyemak imbas:
1), pelayar IE menyokong acara ini.
2) Penyemak imbas Firefox menyokong acara ini.
3). Pelayar Opera menyokong acara ini.
4) Google Chrome menyokong acara ini.
5), pelayar Safria menyokong acara ini.
Contoh kod:

<html>
<head>
<meta charset="gb2312"/>
<title>脚本之家</title>
<style type="text/css">
div{
 width:100px;
 height:100px;
 background-color:red;
}
</style>
<script type="text/javascript">
window.onload=function(){
 var mydiv=document.getElementById("mydiv");
 mydiv.onclick=function(){
 mydiv.style.backgroundColor="green";
 }
}
</script>
</head>
<body>
 <div id="mydiv"></div>
</body>
</html>

Salin selepas log masuk

Kod di atas mendaftarkan pengendali acara onclick untuk div Apabila div diklik, pengendali ini akan dilaksanakan untuk menetapkan warna latar belakang div kepada hijau.

2. Definisi dan penggunaan acara onblur: Peristiwa ini dicetuskan apabila objek yang ditentukan kehilangan fokus.
Contoh kod:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>脚本之家</title>
<style type="text/css">
.mytest{
 background-color:green;
}
</style>
<script type="text/javascript">
window.onload=function(){
 var username=document.getElementById("username");
 username.focus();
 username.onblur=function(){
 username.style.backgroundColor="green";
 }
}
</script>
</head>
<body>
<input type="text" name="username" id="username" />
</body>
</html>

Salin selepas log masuk

Kod di atas mengikat fungsi pengendali acara kepada acara onblur elemen input Apabila elemen input hilang fokus, warna latar belakang boleh ditetapkan kepada hijau.

Langkah seterusnya ialah perkara yang paling penting:

Klik kotak teks untuk mengosongkan teks lalai, tinggalkan dan kemudian pulihkannya

Kotak teks yang perlu diisi pada banyak tapak web akan memberikan bahasa gesaan lalai secara lalai Apabila tetikus mengklik pada kotak teks ini, teks lalai di dalam boleh dikosongkan apabila teks yang dimasukkan dipadamkan meninggalkan kotak teks Kemudian tulis teks lalai ke dalam kotak teks.

Kodnya adalah seperti berikut:

<html>
<head>
<meta charset="gb2312">
<title>点击文本框清除默认值</title>
<script type="text/javascript"> 
window.onload=function()
{
 var username=document.getElementById("username");
 username.onclick=function()
 {
 if(username.value=="请输入您的姓名")
 {
 username.value="";
 this.focus();
 }
 }
 username.onblur=function()
 {
 if(username.value=="")
 {
 username.value="请输入您的姓名";
 }
 }
}
</script>
</head>
<body>
<input type="text" value="请输入您的姓名" id="username" />
</body>
</html>

Salin selepas log masuk

Kod di atas menyedari keperluan kami Apabila kotak teks diklik, kandungan dalam kotak teks boleh dikosongkan Jika tiada kandungan dimasukkan dalam kotak teks, apabila fokus tetikus meninggalkan kotak teks pada masa ini nilai kotak teks akan dipulihkan kepada keadaan lalai. Walau bagaimanapun, jika kotak kata laluan agak menyusahkan, kerana kotak kata laluan tidak dipaparkan dalam teks biasa, penyelesaiannya boleh didapati dalam perenggan seterusnya tentang cara melaksanakan gesaan dalam kotak kata laluan.

Cara merealisasikan gesaan muncul dalam kotak kata laluan:
Kadang-kadang kita perlu mempunyai beberapa bahasa segera dalam borang log masuk, seperti "Sila masukkan nama pengguna anda" dan "Sila masukkan kata laluan anda". Bagi nama pengguna, ia mudah disebut, tetapi " Sila masukkan kata laluan anda" muncul dalam kotak kata laluan. Bahasa seperti ini 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:

<html> 
<head> 
<meta charset="gb2312"> 
<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". Apabila kotak teks diklik, kotak kata laluan dengan jenis="kata laluan" dipaparkan , yang bermaksud bahawa a Hanya pengganti.

Di atas adalah keseluruhan kandungan artikel ini saya harap ia akan membantu semua orang dalam mempelajari pengaturcaraan javascript.