Rumah >hujung hadapan web >html tutorial >Analisis dan penyelesaian kepada masalah yang dihadapi semasa penggunaan tag label_HTML/Xhtml_Pengeluaran halaman web

Analisis dan penyelesaian kepada masalah yang dihadapi semasa penggunaan tag label_HTML/Xhtml_Pengeluaran halaman web

WBOYasal: 2016-05-16 16:40:071818semak imbas

Saya baru-baru ini menggunakan tag label semasa membuat sesuatu Memandangkan tag label jarang digunakan sebelum ini, saya menghadapi masalah yang sangat pelik. Apa masalahnya? Jom lihat kesan di bawah

<!DOCTYPE html>
<html>
<kepala>
<meta charset="utf-8" />
<title>Pembelajaran tag label HTML mengikut Typeof</title>
<style type="text/css">
html, badan {
margin: 0;
padding: 0;
}
.title {
jidar: 10px;
}
.login-item, .login-button {
jidar: 20px;
ketinggian: 30px;
}
.clearfix {
jelas: kedua-duanya;
kandungan: "";
paparan: blok;
}
.login-item label {
terapung: kiri;
lebar: 70px;
}
.login-item .text {
ketinggian: 18px;
lebar: 200px;
terapung: kiri;
}
</style>
</head>
<badan>
<div class="title">
Masalah yang dihadapi semasa penggunaan label label
</div>
<div class="login-item clearfix">
<label untuk="nama pengguna">Nama pengguna: </label>
<input type="text" class="text" id="username" name="username" />
<lable id="J_usernameError"></label>
</div>
<div class="login-item clearfix">
<label untuk="kata laluan">Kata Laluan  kod:</label>
<input type="text" class="text" id="password" name="username" />
<label id="J_passwordError"></label>
</div>
<div class="login-button clearfix">
<input type="submit" value="Login" id="J_submitLogin" />
</div>
<skrip>
document.getElementById('J_submitLogin').onclick = function() {
var usernameError = document.getElementById('J_usernameError');
usernameError.innerHTML = 'Ralat nama pengguna';
};
</skrip>
</badan>
</html>

Petua: Anda boleh mengubah suai sebahagian kod sebelum menjalankan

Tujuan demo ini adalah untuk mengesahkan pengguna apabila mengklik butang log masuk Semak sama ada nama pengguna dan kata laluan yang dimasukkan adalah sah Jika tidak, mesej ralat akan dipaparkan di bawah kotak input nama pengguna.
Elemen yang menggesa mesej ralat dirancang untuk dilaksanakan dengan label.

Buka halaman demo dengan menjalankan kod, klik butang log masuk dan lihat apa yang berlaku. Jika anda menggunakan Firefox, Chrome atau IE9, selepas mengklik butang log masuk, anda akan digesa dengan "nama pengguna yang salah", yang merupakan hasil yang diingini. Jika anda menggunakan IE6, 7, atau 8, bagaimana anda boleh menyemak sama ada terdapat sebarang perubahan? Pada masa ini, anda mendapati bahawa tiada maklumat digesa pada halaman Buka alat pembangun dan lihat pada kawalan Pada masa ini, anda akan mendapati bahawa mesej ralat "SCRIPT600: Ralat masa jalan tidak diketahui" digesa. Apabila saya menghadapi masalah ini, saya mencuba dua kaedah, innerText dan innerHTML, dan mendapati bahawa ralat seperti ini telah dilaporkan, saya fikir ia adalah cara yang salah untuk menggunakannya dan innerHTML tidak disokong.

Mengapakah ralat sedemikian digesa dalam IE6, 7 dan 8 tetapi Firefox, Chrome dan IE9 (pelayar lain belum dicuba) berjalan seperti biasa. Orang yang berhati-hati boleh segera melihat di mana masalah itu terletak Untuk elemen yang menggesa "nama pengguna yang salah", teg permulaan ditulis sebagai "label" dan bukannya label. Tetapi saya tidak perasan masalah ini pada masa itu Saya selalu fikir ia adalah masalah dengan cara label label digunakan Mengenai mengapa enjin JS IE6, 7, dan 8 akan mengendalikan atribut innerText dan innerHTMl. dengan nama label yang salah. Ralat berlaku, tetapi tiada ralat dalam Firefox, Chrome dan IE9. Jika ada rakan yang tahu lebih lanjut, sila jelaskan.
Masalah ini sebenarnya agak rendah saya tulis nama label. Tetapi saya tidak menyedarinya pada masa itu saya kemudian menemui masalah ini selepas kajian yang teliti, jadi saya memutuskan untuk merekodkannya.

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：Perbincangan tentang penyesuaian gaya dan isu keserasian penyemak imbas apabila elemen input [type="file"]_HTML/Xhtml_Web page productionArtikel seterusnya：Perbincangan tentang penyesuaian gaya dan isu keserasian penyemak imbas apabila elemen input [type="file"]_HTML/Xhtml_Web page production

Artikel berkaitan

Lihat lagi