Saat menggunakan HTML+CSS+JavaScript untuk produksi halaman, kami sering menemukan detail kecil yang memengaruhi pengalaman pengguna dan mudah diabaikan oleh kami. Misalnya, informasi prompt dalam kotak input input dapat ditampilkan dan disembunyikan berdasarkan perolehan objek dan kehilangan fokus. Hari ini, saya ingin berbagi dengan Anda tips ini, saya harap Anda tidak akan menembak batu bata ~~~
1. Persyaratan
Kotak input input, ketika kursor ditampilkan, menyembunyikan informasi yang cepat;
2. Metode
1. Berikan nama ID ke input, onfocus = "Metode nama 1 (ini)", onclur = "Metode nama 2 (ini)"
2. Deklarasikan nilai variabel, dapatkan input melalui nama ID
3. Metode Fungsi Nama 1 (inputObj) {
Salin kode kode sebagai berikut:
if (inputoBj.value == "...") {) {
inputObj.value = "";
}
}
4. Metode fungsi nama 2 (inputObj) {
Salin kode kode sebagai berikut:
if (inputoBj.value == "" ") {{
inputobj.value = "..." ;;;
}
}
5. Catatan: Jika ada beberapa tag input di halaman yang sama yang memerlukan pengaturan yang sama, nama metode tidak dapat konsisten.
Ketiga, contoh
Salin kode kode sebagai berikut:
<!
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "konten tipe" content = "text /html; charset = utf-8" /> />
<title> dokumen non -judul </iteme>
<tautan href = "file: /// e | /midi/css/index.css" type = "text/css" rel = "stylesheet"/>/>
<type skrip = "Teks/JavaScript">
var value = document.geteLementById ('shuru');
Fungsi qinggong (inputoBj) {{
if (inputoBj.value == "Harap masukkan nama Anda") {{
inputObj.value = "";
}
}
Fungsi likai (inputoBj) {
if (inputoBj.value == '') {
inputObj.value = "Harap masukkan nama Anda";
}
}
</script>
<Type style = "text/css">
/*Teks di bawah ini dapat mengubah warna latar belakang kotak input di browser IE*/
Input .Search {Star: Expression
this.style.backgroundColor = "#ff0000"
},
onmouseout = function () {
This.style.backgroundColor = "#ffffff"
})
}
</tyle>
</head>
<body>
<input type = "text" id = "shuru" value = "Harap masukkan nama lagu atau nama penyanyi" onfocus = "qinggong (this)" onblur = "likai (this)"/>
</body>
</html>