Js mencipta kesan teks lalai yang hilang apabila kotak input diklik_Text kesan khas

Untuk meningkatkan pengalaman pengguna dan kemudahan penggunaan, sesetengah pereka bentuk akan mengoptimumkan perkara yang kerap digunakan pengguna pada halaman web, seperti kotak input. Bagaimanakah kotak input umum dioptimumkan? Dari perspektif pengalaman pengguna, memudahkan langkah pengguna dan menjadikannya lebih mudah untuk pengguna meningkatkan kebolehgunaan Contohnya, menukar warna kotak input apabila tetikus melayang di atas kotak input, secara automatik memilih teks lalai dalam kotak input. , atau mengklik untuk memasukkan Kosongkan kandungan lalai secara automatik apabila kotak dibuka, dsb. Kesan ini kedengaran rumit, tetapi ia sebenarnya sangat mudah untuk dilakukan Ia hanya memerlukan sekeping kod JavaScript untuk menyelesaikannya. Yang berikut memperkenalkan kod untuk beberapa kesan:

1 Klik kotak input untuk memilih kod Html kandungan:

<form id="form1" name="form1" method="post" action=""> 
<label for="textfield">输入内容：</label> 
<input name="textfield" type="text" id="textfield" value="Dreamweaver"onfocus="this.select()" /> 
</form>

2 Tukar warna jidar atau warna latar belakang apabila tetikus melayang di atas kotak input

Terdapat dua kaedah untuk kesan ini: kaedah pertama adalah menggunakan elemen pseudo dalam CSS: fokus; kaedah kedua masih menggunakan sekeping kecil javascript kaedah kod html seseorang adalah sama seperti contoh di atas, kecuali itu perenggan berikut ditambahkan pada CSS :
input:hover { border:1px pepejal #F00; Apabila tetikus melayang di atas kotak input, sempadan kotak input akan bertukar menjadi merah Walau bagaimanapun, kaedah ini hanya sah dalam pelayar Firefox dan IE6 tidak menyokongnya, jadi ia mempunyai had tertentu. Kod untuk kaedah dua kebanyakannya sama seperti contoh di atas, kecuali bahagian kod tuding tetikus ditambahkan pada penghujung:

<form id="form1" name="form1" method="post" action=""> 
<label for="textfield">输入内容：</label> 
<input name="textfield" type="text" id="textfield" value="Dreamweaver"onfocus="this.select()"onmouseover="this.style.borderColor='#FF6600'" onmouseout="this.style.borderColor=''" /> 
</form>

Menggunakan kod ini, kebanyakan penyemak imbas boleh menyokongnya.

3 Klik kotak input dan teks lalai akan hilang Terdapat juga kesan apabila tetikus mengklik pada kotak input, teks lalai asal hilang. Jika anda memasukkan kandungan baharu yang lain dan kemudian menjauhkan tetikus, kandungan baharu kotak input kekal tidak berubah jika anda tidak memasukkan kandungan baharu, tetikus meninggalkan kotak input dan teks lalai dipulihkan. Kesan ini boleh dicapai dengan hanya menambah bahagian pendek javascript:

<form id="form1" name="form1" method="post" action="">
<label for="textfield">输入内容：</label> 
<input name="textfield" type="text" id="textfield" value="Dreamweaver" onmouseover="this.style.borderColor='#FF6600'" onmouseout="this.style.borderColor=''" onFocus="if (value =='Dreamweaver'){value =''}" onBlur="if (value ==''){value='Dreamweaver'}"/> 
</form>

cadangan; kami akan mendengar dengan teliti kritikan anda, sila huraikan cadangan atau masalah anda dengan terperinci.

Tiga kesan di atas adalah aplikasi javascript yang agak mudah.