IE8_javascriptスキルで入力のtype属性を変更するときのエラーの解決策-jsチュートリアル-php.cn

IE8_javascriptスキルで入力のtype属性を変更するときのエラーの解決策

WBOY

リリース： 2016-05-16 16:36:20

オリジナル

1378 人が閲覧しました

概要:

図に示すように、ユーザーが [クリアテキストを表示] チェックボックスをオンにすると、ユーザーが入力したパスワードがクリアテキストで表示される必要があり、チェックボックスを削除した場合は元に戻す必要があります。最初に思いつくのは、入力ボックスの型を変更して、jQuery の attr を使用してテストを行うことです。問題はありませんが、ie8 では入力の変更が許可されていないことがわかりました。最終的には、別のアプローチを使用して実装されました。

Show Plain Text がチェックされている場合は、入力ボックスを type="text" に置き換えます。チェックされていない場合は、入力ボックスを type="password" に置き換えます。コードは次のとおりです。

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<script src="jquery.min.js"></script>
</head>
<body>
<span id="pass"><input name="password" type="password"></span><label><input type="checkbox" id="show-password">显示明文</label>
<script>
$('#show-password').click(function() {
var inp,cname,val;
if(this.checked) {
inp = $('#pass').children('input');
cname = inp.attr('name');
val = inp.val();
$('#pass').html('<input name="'+cname+'" value="'+val+'" type="text">');
} else {
inp = $('#pass').children('input');
cname = inp.attr('name');
val = inp.val();
$('#pass').html('<input name="'+cname+'" value="'+val+'" type="password">');
}
});
</script>
</body>
</html>

ログイン後にコピー

概要:

この記事には技術的な内容はありませんが、この種のインタラクションは主に IE8 以下の互換性の問題を考慮するために書かれています。あなたのプロジェクトにこの種のインタラクションがある場合は、それを参照することができます。または、より良い方法がある場合は、それを私と共有することができます。