How to change an input from text to password and vice-versa?

Question

If you visit this site you can see that the type of the Senha input is text. But when I type something in, it changes to Password.

When I click out it maintains my input and maintains it's type as Password.

However if there is no text and I click out, it reverts back to text.

Can you explain how I can easily achieve something like this? It's very good from a UX standpoint.

I'm using the latest version of jQuery.

I'm not seeing the UX advantage to this. Why is a blank text input better than a blank password one? — GregL, Oct 27 '11 at 15:43
@GregL: It's not blank. It shows the text: "Senha". Visit the website to see how it works from a user standpoint. — Only Bolivian Here, Oct 27 '11 at 15:45
This question seems applicable and shows some of the pitfalls of this and workarounds: http://stackoverflow.com/questions/1544317/jquery-change-type-of-input-field — arkigos, Oct 27 '11 at 15:47

Ben Lee · Accepted Answer · 2011-10-27T15:55:19.013

The easiest way is to use HTML5 placeholder text. But this can have some unintended renderings when applied to password fields in some browsers, and doesn't even work at all in IE prior to IE9. So for cross-browser consistency, I'd use a jQuery plugin for it:

http://plugins.jquery.com/project/html5placeholder

Then you hardly have to do anything. In you'r HTML you'd set up a regular password text field, but with a placeholder, like this:

<input type="password" placeholder="Senha">

In the javascript (after including the jQuery plugin above), you can just activate it:

$('input').placeholder();

But, if you want to use a traditional method (or if the above method doesn't work for you for some reason), you can just swap out the password field with a plain text field as required. You'd set up your HTML like this, with a visible prompt and hidden actual field:

<input id="password-field" type="password" name="password" style="display: none;">
<input id="password-prompt" type="text" value="Senha">

Then, jquery to swap it out:

// This makes the password field show up when you focus on the prompt,
// and changes focus to the password field
$('#password-prompt').focus(function() {
    $(this).hide();
    $('#password-field').show().focus();
});

// This makes the prompt re-appear when you lose focus on the password field,
// but only if it's still empty (if you typed anything in, it leaves it as is)
$('#password-field').blur(function() {
    if ($(this).val() == '') {
        $(this).hide();
        $('#password-prompt').show();
    }
});

James Johnson · Answer 2 · 2011-10-27T15:57:12.737

0

Browser security doesn't allow you to change the input type directly. You can however use replaceWith to replace the input with a password type:

$("#input1").replaceWith($("<input>").attr({ "type" : "password", "id" : "input1" }));

Tested it and it does work. Here's the jsFiddle.

edited Oct 27 '11 at 15:57

answered Oct 27 '11 at 15:45

James Johnson

43,670
6
67
106

score 0 · Answer 3 · answered Oct 27 '11 at 15:57

The following worked for me on iOS Safari:

$(function() {
    $('#tb').keypress(function() {
        $(this).prop('type', 'password');
    }).blur(function() {
        if ($(this).val() === '')
            $(this).prop('type', 'text');
    });
});

jsFiddle: http://jsfiddle.net/unwJh/5/

Does it work in any other browsers?

score 0 · Answer 4 · answered Oct 27 '11 at 16:04

0

You need to replace the element, example:

http://jsfiddle.net/YEHFe/

answered Oct 27 '11 at 16:04

Esailija

130,716
22
250
308

How to change an input from text to password and vice-versa?

4 Answers4