ホームページ >ウェブフロントエンド >htmlチュートリアル >ラベルタグ使用時に発生した問題の分析と解決策_HTML/Xhtml_Webページ制作

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

WBOYオリジナル: 2016-05-16 16:40:071818ブラウズ

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

<!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 ではエラーは発生しません。これについて詳しく知っている人がいれば、説明してください。
この問題は実際には非常に低レベルで、ラベル名を間違って書きました。しかし、その時は気づかなかったのですが、後でよく調べてみるとこの問題に気づいたので、記録しておくことにしました。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：入力要素 [type="file"]_HTML/Xhtml_Web ページ作成時のスタイルのカスタマイズとブラウザの互換性の問題についてのディスカッション次の記事：入力要素 [type="file"]_HTML/Xhtml_Web ページ作成時のスタイルのカスタマイズとブラウザの互換性の問題についてのディスカッション

続きを見る

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

関連記事