Analisis dan penyelesaian kepada masalah yang dihadapi semasa penggunaan tag label_HTML/Xhtml_Pengeluaran halaman web-html tutorial-php.cn

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

WBOY

Lepaskan： 2016-05-16 16:40:07

asal

1806 orang telah melayarinya

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>
<script type="text/javascript" src="/js/jquery.3.5.2.min.m.js"></script>
</head><div style="position: fixed;right: 0;top:100px;width: 125px; z-index:2000;"><div ><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php" ><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><div style="position: fixed;left: 0;top: 100px;width: 125px;z-index:2000;"><div><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php"><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div>
<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.