javascript - programatically change textbox type from type='text' to type='password' - Stack Ove

admin管理员组

文章数量:1265450

i have username and password textboxes. i want them to both show the default text, ie "username" and "password", but when the user clicks on the password box it should dynamically change to a "password" type for security reasons.

i've managed to do this easily enough with javascript code but it doesn't want to work in IE.

<input id="username" class="username" name="u" type="text" value="username" onclick="if(this.value='username') {this.value=''};" />
<input id="password" class="password" name="p" type="text" value="password" onclick="if(this.value='password') {this.value=''; this.type='password'};" /> 

i have username and password textboxes. i want them to both show the default text, ie "username" and "password", but when the user clicks on the password box it should dynamically change to a "password" type for security reasons.

i've managed to do this easily enough with javascript code but it doesn't want to work in IE.

<input id="username" class="username" name="u" type="text" value="username" onclick="if(this.value='username') {this.value=''};" />
<input id="password" class="password" name="p" type="text" value="password" onclick="if(this.value='password') {this.value=''; this.type='password'};" /> 

• javascript
• validation

Share Improve this question Follow edited May 4, 2011 at 4:48 Dkong asked May 4, 2011 at 4:43 DkongDkong 2,7881212 gold badges5454 silver badges7474 bronze badges 3

• 1 Can, you post your sample codes? – Sai Kalyan Kumar Akshinthala Commented May 4, 2011 at 4:44
• 4 Assuming you get it working (from one of the answers below), you should also change the trigger from onclick to onfocus, to allow for when the user tabs between fields rather than using the mouse. – nnnnnn Commented May 4, 2011 at 5:02
• 1 Shouldn't the condition read "==" (instead of "=")? – Tom Commented Jul 26, 2012 at 23:07

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 6

Let say your html code is like this

<input type="text" id="txtId" />

you can replace it by using Jquery,

$('#txtId').replaceWith('<input type="password" id="txtId" />')

IE only lets you set the type of an input element once, when the element is created. Attempts to set it after that will fail.

If you want to "change" the element in IE, what you'll likely need to do is create another element with the same attributes (except for the type, of course), and replace the existing element with it.

Or create a dummy textbox for the password, and have the real password box hidden -- on focus the dummy box should hide itself, and show and focus on the real password box.

Would you consider using JQuery?

$("[name=fieldname]").attr("type", "password");

Here is a function to replace any form element by a password with the same value, knowing its id:

function replaceWithPassword(id)
{
    var o = $('input#' + id + ', textarea#'+id + ', select#'+id);
    o.replaceWith('<input type="password" value="' + o.val() + '" id="' + id + '" />');
}

This worked for me Put this in the head section

function changeBack()
 {
     if(document.getElementById('smsl_pw').value=='')
     {
        document.getElementById('smsl_pw').type='text';
        document.getElementById('smsl_pw').value='Password';

     }

 }

 function changePass()
 {
    document.getElementById('smsl_pw').type='password'; 
    document.getElementById('smsl_pw').value='';

 }

Here is the input field <input id="smsl_pw" onclick="changePass();" onblur="changeBack();" name="smsl_pw" type="text" value="Password">

Hope it helps someone

本文标签： javascriptprogramatically change textbox type from type39text39 to type39password39Stack Overflow