jsで入力ボックスのtype属性を動的に変更する（実装メソッド解析）_javascriptスキル

達成される効果: 入力ボックス。入力ボックスがフォーカスを取得していない場合、値は「パスワード」であり、入力ボックスがフォーカスを失っている場合、入力内容は「*****」として表示されます。 🎜>

次のjsを直接考えていきます

$("#showPwd").focus(function(){

$(this).attr('type','password');
});

期待した効果が得られず、キャッチされない例外タイプのプロパティを変更できないエラーが発生したことが判明しました。jQuery 1.42 ソース コード 1488 行目を確認してください。

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

if ( name === “type” && rtype.test( elem.nodeName ) && elem.parentNode ) {
jQuery.error( “type プロパティは変更できません” );
}

jQuery で Yuansheng の JS を変更できない場合はどうすればよいでしょうか?

$("#pwd").focus(function(){

$("#pwd")[0].type = 'パスワード';
$("#pwd").val( "");
});

FF では、パスワード入力ボックスのタイプを「password」に変更し、値を空に設定できることがわかりました。しかし、IE では、type 属性を取得できないというメッセージが表示され、このコマンドはサポートされていません。 型をポップして、本当に取得できないかどうかを確認しますか?

$("#showPwd").focus(function(){

alert($("#showPwd")[0].type);
$("#showPwd")[0]。 type = 'パスワード';
$("#showPwd").val("");
});

テキストがポップアップすることがわかりました。取得は不可能ではありませんでしたが、IE では変更できませんでした。 そこで、まず削除してから、タイプがパスワードであるパスワード入力ボックスを生成できると考えました。

次のパスワード入力ボックス

$(“#showPwd”).focus(function() {

var text_value = $(this).val();
if (text_value == this.defaultValue) {
$( "#showPwd").hide();
$("#password").show().focus();
}
});
$("#password")。 Blur(function() {
var text_value = $(this).val();
if (text_value == “”) {
$(“#showPwd”).show();
$(“#パスワード”).hide();
}
});

最終的な効果: 入力ボックスがフォーカスを取得すると、入力内容は「****」として表示され、入力ボックスがフォーカスを失うと、内容が空の場合は「パスワード」が表示されます。