Changing Attribute "type" from text to password

Question

Why isn't the jQuery changing the type attribute of #password_input to password?

<html>
    <head>
        <title></title>
        <style type="text/css">
        </style>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
        <script type="text/javascript">
        $(document).ready(function() {
            $("#password_input").attr('type','password');
        });
        </script>
    </head>
    <body>
        <div id="loginBox">
            <form>
            <input type="text" id="username_input" name="username" /><br />
            <input type="text" id="password_input" name="password" />
            </form>
        </div>
    </body>
</html>

score 25 · Answer 1 · edited Aug 17 '12 at 13:07

25

Yes u can.

Try this its works

<input type="text" class="pwd">
  $('.pwd').click(function(){
  $(this).get(0).type='password';
});

edited Aug 17 '12 at 13:07

j0k

21,914
28
75
84

answered Aug 17 '12 at 10:44

Dilipkumar

259
1
3
2

Worked in chrome like a charm. Thanks. – Adil Malik Oct 16 '12 at 15:30
Man, this was my "oh, I learned something today" moment for today. Many thanks! – José Fernandes Nov 16 '12 at 14:47
Awesome! Works like a charm. – salmanhijazi Jan 03 '13 at 23:27
Nice, but can this be accomplished without jQuery? – David Feb 05 '13 at 19:40
1

Btw, [is said](http://stackoverflow.com/questions/1544317/jquery-change-type-of-input-field#comment15659291_1544338) that it does not work with IE7 and IE8. Anyway, worked in Chromium for me. – alanjds Feb 14 '13 at 23:48
How does the get(0) part of this work? For me, it works on the page where intended, but causes bad side effects on other pages. – Jeffrey Simon Apr 24 '13 at 21:40
2

$(this).get(0) in this context is pointless. It makes a normal javascript object into a jquery object then gets the normal object straight back out. Just use this.type='password' instead. – Matt Skeldon Apr 10 '14 at 14:02

JClaspill · Accepted Answer · 2013-06-11T23:48:46.500

11

'type' property/attribute cannot be changed.

edit: This was accurate for JQuery at the time it was posted. See other answers for how it can be done now.

edited Jun 11 '13 at 23:48

answered Apr 10 '11 at 01:34

JClaspill

1,637
18
28

1

Look at bug reports on http://api.jquery.com/attr/ to see that you are not alone. Firebug will even tell you that 'property cannot be changed'. – JClaspill Apr 10 '11 at 01:37
1

I'm not sure why this keeps getting voted down... Anyone care to explain why I keep getting downvotes? – JClaspill Aug 27 '12 at 16:08
because people are getting confused between jquery and javascript. maybe you can edit your answer to reflect that? – owagh Nov 29 '12 at 20:19
@candidJ Read the post. In 2011, JQuery did not have this ability. – JClaspill Nov 22 '16 at 14:59

Jimmy Sawczuk · Answer 3 · 2013-04-22T16:47:22.780

This is a security measure that most major browsers employ to mitigate screen-reading and password theft (it's more important going the other way, from password to text).

I can't tell from your code what you're trying to do, but here's my guess: you want a textbox with the word Password in it as a hint, and when it gets focus, the user enters their password as a password field. To accomplish this, you can use two elements: an <input type="text"> and an <input type="password">, the latter hidden initially. When the user focuses on the textbox, simply hide it, show the password field, and set the focus. It could get tricky toggling back and forth between them.

Update

This is now way easier to accomplish in modern browsers. Simply use something like this (here's a jsFiddle):

<input type="password" placeholder="Password" />

yes thats exactly what I'm going for... but this threw a wench it what I thought would be fairly simple — AndrewFerrara, Apr 10 '11 at 01:46
@AndrewFerrara check my updated answer for focus blur solution — Hussein, Apr 10 '11 at 02:40

Tom · Answer 4 · 2012-11-29T19:23:00.657

5

You can always use the pure js like:

document.getElementsByName("login_pass")[0].type="text";

edited Nov 29 '12 at 19:23

answered Nov 29 '12 at 15:35

Tom

59
1
2

it can! I do it all the time with Java Script. – Tom Nov 29 '12 at 19:48
because the question is about jquery and not javascript – owagh Nov 29 '12 at 20:17

score 4 · Answer 5 · answered Apr 10 '11 at 01:40

You can't change the type attribute. you must create a new element and delete the old one like this:

var originalBtn = $("#password_input");
var newBtn = originalBtn.clone();

newBtn.attr("type", "password");
newBtn.insertBefore(originalBtn);
originalBtn.remove();
newBtn.attr("id", "password_input");

score 2 · Answer 6 · answered Jan 15 '14 at 07:12

2

Have you tried using .prop?

$("#password_input").prop('type','password');

http://api.jquery.com/prop/

answered Jan 15 '14 at 07:12

Mark Mckelvie

313
4
13

It worked for me (to change the type from `hidden` to `initial`). Thanks! – Bryan Dimas Mar 21 '17 at 16:36

Hussein · Answer 7 · 2011-04-10T02:46:07.143

This will do it

$('<input type="password" id="password_input" name="password" />').insertAfter('#password_input').prev().remove();

Check working example at http://jsfiddle.net/RyVU8/

UPDATE

If you want to show plain text in a password field and then make it a regular password field on focus you can do the following

$('#clear').focus(function() {
    $('#clear').hide();
    $('#password_input').show().focus();
});
$('#password_input').blur(function() {
    if ($('#password_input').val() == '') {
        $('#clear, #password_input').toggle();
    }
});

where #clear represents a text field that shows instead of the password field when it's in blur and user hasn't entered any password yet.

check working example at http://jsfiddle.net/uNGKb/3/

score 1 · Answer 8 · answered Apr 23 '15 at 09:20

Simply create 2 sync Input fields. One as password and one as text. Then switch their visiblity via button. Don't forget to hide the text-input on start.

<input type="password" id="inp_passwd"/><input type="password" id="inp_passwd2"/>
<input id="btn_show_passwd" type="button" value="Show Password" />

Javascript:

// sync input fields
$('#inp_passwd').keyup(function(){
    $('#inp_passwd2').val($(this).val());
});
// show clear password
$('#btn_show_passwd').mousedown(function(){
    $('#inp_passwd').hide();
    $('#inp_passwd2').show();
});
// hide clear password
$('#btn_show_passwd').mouseup(function(){
    $('#inp_passwd').show();
    $('#inp_passwd2').hide();
});
// hide hidden text-field on start
$('#btn_show_passwd').mouseup();

you can use setTimeout as well instead of mouseup

That's a really elegant solution. I like the use of mouse up/down instead of a toggle. — Fi Horan, Aug 23 '16 at 13:13
Won't work if u plan on submitting the form. The field name would have to be the same and form will pick only value of the first or last input. — Fresz, Aug 29 '20 at 10:52

score 1 · Answer 9 · edited Aug 30 '11 at 15:45

<span>Password:</span>
<input type="text" id="pwd" style="width: 180px; color: Gray;" onfocus="Changetxt();this.type='password'" onblur="if(this.value==''){this.type='text';textboxtype();}" value="Enter Your Password Here" />

 <script>

        function Changetxt() {
            if ($('#pwd').val() == "Enter Your Password Here") {
                $('#pwd').val('');
                $('#pwd').css('color', 'black');
            }
        }

        function textboxtype() {
            if ($('#pwd').val().length < 1) {
                $('#pwd').val('Enter Your Password Here');
                $('#pwd').css('color', 'gray');
            }
        }

    </script>

score 0 · Answer 10 · answered Jan 10 '13 at 08:36

0

May need to display text information in the password field made the picture, set to the background of the password field, and removed when the password field focus change background image, so as to achieve the effect of prompting the user

answered Jan 10 '13 at 08:36

user1966024

1

score 0 · Answer 11 · edited Feb 03 '16 at 17:22

I faced a similar challenge recently and i 'd like to assess my opinion. I used some of the above solutions and some other using jQuery (which i like a lot). But when test time came we realize that the solutions through jQuery and attr() function not working. So I find the appropriate solution through pure Javascript.

  var input = document.getElementById('txbOldPass');
  var newInput = document.createElement('input');

        newInput.type = 'text';
        newInput.id = input.id;
        newInput.value = input.value;
        input.parentNode.replaceChild(newInput, input);
        newInput.className = 'text';

and the opposite

  var input = document.getElementById('txbOldPass');
        var newInput = document.createElement('input');
        newInput.type = 'password';
        newInput.id = input.id;
        newInput.value = input.value;
        input.parentNode.replaceChild(newInput, input);
        newInput.className = 'password';

Rene · Answer 12 · 2016-07-27T10:02:01.153

0

All solutions here didnt work for me (Chrome Version 51.0.2704.103 m (64-bit)). Did it like this and it works:

jQuery(function() {
    setTimeout(function(){
        jQuery('.pwForm').attr('type','password');
    }, 1);
});

Works on IE 11, too!

Wait for DOM ready and wait 1 millisecond. Then Change type=text to type=password

edited Jul 27 '16 at 10:02

answered Jul 20 '16 at 13:47

Rene

11
3

score 0 · Answer 13 · answered Jul 03 '20 at 16:09

0

Use this code :

<input type="text" id="password_input" name="password" />
<script>
$("#password_input").click(function(){
    $(this).prop('type', 'date');
});
</script>

answered Jul 03 '20 at 16:09

Uzair Saeed

135
5

score 0 · Answer 14 · answered Jan 05 '21 at 11:10

To change the type attribute value, only need to update your JQuery.

See the example below.

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

  <div id="loginBox">
    <form>
      <input type="text" id="username_input" name="username" /><br />
      <input type="text" id="password_input" name="password" />
    </form>
  </div>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      $("#password_input").attr('type','password');
    });
  </script>
</body>
</html>

score -1 · Answer 15 · answered Jul 08 '12 at 06:05

-1

The above answers are partially wrong when they state type attribute cannot be changed. Yes, it can be changed via prop/attr jquery method. The thing is, it is supported by all browsers but IE

answered Jul 08 '12 at 06:05

Otvazhnii

403
3
10

Changing Attribute "type" from text to password

15 Answers15

Update

Check working example at http://jsfiddle.net/RyVU8/

check working example at http://jsfiddle.net/uNGKb/3/