jQuery で入力フィールドのタイプをパスワードからテキストに変更すると失敗するのはなぜですか?

jQuery: 入力フィールドの型の変更

このシナリオには、jQuery を使用して入力フィールドの type 属性をパスワードからテキストに変更する試みが含まれます。 。しかし、この努力は失敗に終わりました。

提供されたコードの実行時:

$(document).ready(function() {<pre class="brush:php;toolbar:false">// #login-box password field
$('#password').attr('type', 'text');
$('#password').val('Password');

});

は #password フィールドをターゲットにすることを目的としていますtype 属性をパスワードとして指定し、それを標準のテキストフィールドに切り替えます。その後、変更されたフィールドに「パスワード」というテキストを入力しようとします。

しかし、コードが存在するにもかかわらず、望ましい結果は実現されません。なぜですか?

問題の核心は、ブラウザの機能内のセキュリティ上の懸念にあります。入力フィールドのタイプを変更すると、特にパスワードなどのセキュリティで保護されたタイプから通常のものに変更すると、ブラウザによって実装されたセキュリティ対策がトリガーされます。これは、Safari などのブラウザでよく発生します。

このジレンマを解決するには、ベア DOM (ドキュメント オブジェクト モデル) を使用する回避策をお勧めします。

<br>var pass = document.createElement('input');<br>pass.type = 'password';<br>document.body.appendChild(pass);<br>pass.type = 'text';<br>pass.value = 'Password';<br>

このアプローチは、望ましい結果を達成しながら jQuery の制限を回避します。

注目に値します。 jQuery を介して type 属性を直接変更すると、IE 内で問題が発生します。 jQuery のソース コードでは、次の制約が明らかになります。

<br>// type プロパティの変更は許可できません (IE で問題が発生するため)<br>if ( name == " type" && jQuery.nodeName( elem, "input" ) && elem.parentNode )</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">throw "type property can't be changed";