0

使いやすさの理由から、ログイン フォームにチェックボックスを追加して、ユーザーがパスワード フィールドのマスキングを切り替えられるようにしたいと考えています。

サンプルコード

このための基本的なコードは次のとおりです (これは簡単なモックアップ コードであり、Chrome Canary 以外ではテストされていません)。

HTML

<input type="password" name="password" id="password" value="somepassword" />
<input type="checkbox" name="unmask" id="unmask" />

JavaScript 

var password = document.getElementById('password'),
    chkbox = document.getElementById('unmask');
        
        
chkbox.addEventListener('click', function (e) {
  password.type = e.currentTarget.checked ? 'text' : 'password';
});

JSFiddle

上記のコードの動作を参照してください。

上記の概念は完全にうまく機能しているように見えますが、 jQuery のソース コードtypeで属性を反転するコードを見ると、次のようなコメントが表示されます。

// type プロパティを変更することはできません (IE で問題が発生するため)

これは、StackOverflow の他の場所で見た同様の引用に追加されました...

Microsoft Internet Explorer 5 の時点で、type プロパティは一度だけ読み取り/書き込みが可能ですが、入力要素が createElement メソッドで作成されたとき、およびドキュメントに追加される前に限られます。

...上記のコードが Internet Explorer では使用できないことを示しているように見えます。

私が知りたいのは; これは本当ですか？もしそうなら、これはIE7/8などの問題ですか？これに関する追加の公式ドキュメントはありますか。

4

3 に答える 3

0

IEではできません。これらの2つのタイプを切り替えるたびに、新しい入力を作成して古い入力に置き換える必要があります。これは、IE<9の唯一のソリューションです。

于 2012-10-31T13:04:56.203 に答える
0

これは既知の問題です。他のフォーラムと回答を確認してください。

http://www.daniweb.com/web-development/javascript-dhtml-ajax/threads/190995/change-input-type-in ​​-ie http://stackoverflow.com/questions/1987788/javascript-ie6-7 -8-change-input-type

その場合は、を使用できます.replaceWith();。

chkbox.addEventListener('click', function (e) {
  var $clone = $("password").clone();
  $clone.attr("type", e.currentTarget.checked ? 'text' : 'password');
  $("password").replaceWith($clone);
});

同じ理由$clone.attrで機能しない可能性があるため、パスワード除外タイプからオブジェクトを作成してみることもできます。

お役に立てれば。

于 2012-10-31T13:09:20.123 に答える
0

IE では、入力フィールドの属性タイプを変更できません。

回避策:

<div id="container">
<input type="password" name="password" id="password" value="somepassword" />
<input type="text" name="passwordtext" id="passtext" value="somepassword" style="display:none;" />
<input type="checkbox" name="unmask" id="unmask" />
</div>

生の Javascript ではなく、jQuery を使用します。IE には、addEventListener はなく、単に attachEvent だけです (Microsoft の優秀な人々に感謝します)。イベント リスナーを適切にバインドします。

$('#unmask').click(function() {
    if($(this).is(':checked')) {
        $('#password').hide();
        $('#passtext').show();
};
});
于 2012-10-31T13:07:17.427 に答える