ラベルタグ使用時に発生した問題の分析と解決策_HTML/Xhtml_Webページ制作-htmlチュートリアル-php.cn

ラベルタグ使用時に発生した問題の分析と解決策_HTML/Xhtml_Webページ制作

WBOY

リリース： 2016-05-16 16:40:07

オリジナル

1788 人が閲覧しました

最近、物を作るときにラベルタグを使用するようになりました。以前はラベルタグをほとんど使用していなかったので、非常に奇妙な問題に遭遇しました。何が問題ですか?エフェクトを見てみましょう

<!DOCTYPE html>
<html>

<div class="タイトル">
ラベルラベルの使用中に発生した問題
</div>
<div class="ログインアイテムクリアフィックス">
<label for="ユーザー名">ユーザー名: </label>
<input type="text" class="text" id="ユーザー名" name="ユーザー名" />
<lable id="J_usernameError"></label>
</div>
<div class="ログインアイテムクリアフィックス">
<label for="password">パスワード  コード:</label>
<input type="text" class="text" id="パスワード" name="ユーザー名" />
<label id="J_passwordError"></label>
</div>
<div class="ログインボタンクリアフィックス">
<input type="submit" value="Login" id="J_submitLogin" />
</div>
<スクリプト>
document.getElementById('J_submitLogin').onclick = function() {
var usernameError = document.getElementById('J_usernameError');
usernameError.innerHTML = 'ユーザー名エラー';
};
</スクリプト>
</ボディ>
</html>

ヒント:

を実行する前にコードの一部を変更できます。このデモの目的は、ログインボタンをクリックしたときにユーザーを確認することです。入力したユーザー名とパスワードが正しいかどうかを確認し、正しくない場合は、ユーザー名入力ボックスの下にエラーメッセージが表示されます。
エラーメッセージを表示する要素は label を使用して実装される予定です。

コードを実行してデモページを開き、ログインボタンをクリックして、何が起こるかを確認してください。 Firefox、Chrome、または IE9 を使用している場合、ログインボタンをクリックすると、「間違ったユーザー名」というメッセージが表示されますが、これは望ましい結果です。 IE6、7、または 8 を使用している場合、変更があるかどうかを確認するにはどうすればよいですか?この時点では、ページに情報が表示されていないことがわかります。開発者ツールを開いてコントロールを確認すると、「SCRIPT600: 不明なランタイムエラー」というエラーメッセージが表示されます。この問題に遭遇したとき、innerText と innerHTML の 2 つの方法を試してみましたが、このようなエラーが報告されていることがわかり、使い方が間違っているのではないかと思い、w3cschool で確認したところ、innerText については書かれていないことがわかりました。および innerHTML はサポートされていません。

IE6、7、8 ではこのようなエラーが表示されるのに、Firefox、Chrome、IE9 (他のブラウザは試していない) では正常に動作するのはなぜですか。注意深い人は、「間違ったユーザー名」を促す要素の場合、開始タグが label ではなく「lable」と書かれているため、問題がどこにあるのかすぐにわかります。しかし、当時私はこの問題に気づきませんでした。IE6、7、8 の JS エンジンが要素の innerText 属性と innerHTMl 属性を操作するのは、ラベル label の使用方法に問題があるとずっと考えていました。ラベル名が間違っているとエラーが発生しますが、Firefox、Chrome、IE9 ではエラーは発生しません。これについて詳しく知っている人がいれば、説明してください。
この問題は実際には非常に低レベルで、ラベル名を間違って書きました。しかし、その時は気づかなかったのですが、後でよく調べてみるとこの問題に気づいたので、記録しておくことにしました。