Why Does Changing an Input Field Type From Password to Text With jQuery Fail?

jQuery: Changing Input Field Type

This scenario involves an attempt to alter the type attribute of an input field from password to text using jQuery. However, the effort proves unsuccessful.

The provided code, upon execution:

$(document).ready(function() {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">// #login-box password field
$('#password').attr('type', 'text');
$('#password').val('Password');

Copy after login

});

aims to target the #password field with the type attribute designated as password and switch it to a standard text field. Subsequently, it aims to populate the altered field with the text "Password."

However, despite the code's existence, the desired outcome fails to materialize. Why?

The crux of the issue lies in security concerns within the browser's functionality. Changing the type of an input field, particularly from a secured type like password to a regular one, triggers security measures implemented by the browser. This is often observed with browsers such as Safari.

To resolve this dilemma, a workaround using the bare DOM (Document Object Model) is advisable:

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

This approach bypasses jQuery's limitations while achieving the desired result.

It's worth noting that direct modification of the type attribute via jQuery encounters issues within IE. jQuery's source code reveals this constraint:

<br>// We can't allow the type property to be changed (since it causes problems in 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";

Copy after login