How to change the input type property in jQuery?

Question

I have a login form with username and password fields. I am using a placeholder to show help text for each input. It's working fine in Firefox, and Chrome, but not in IE, as placeholder is a HTML5 input property. I am writing a custom function to work the placeholder in IE. On that particular function I want to change the password field input type from "password" to "text" in jQuery.

Please suggest a solution for this.

You do know that unsupported browsers will automatically fallback to the text type ? — adeneo, May 22 '13 at 18:35
possible duplicate of [JQuery change type of input field](http://stackoverflow.com/questions/1544317/jquery-change-type-of-input-field) — Mathletics, May 22 '13 at 18:35
Just use a js placeholder plugin like this one: https://github.com/mathiasbynens/jquery-placeholder — adamdehaven, May 22 '13 at 18:36

score 5 · Accepted Answer · answered May 22 '13 at 18:33

5

$('input:password').prop('type','text');

Demo --> http://jsfiddle.net/47hem/

answered May 22 '13 at 18:33

Mohammad Adil

43,337
17
86
109

@thatidiotguy: [See this](http://jquery.com/upgrade-guide/1.9/#input-attr-type-newvalue-in-oldie) – palaѕн May 22 '13 at 18:43
1

@PalashMondal Hey, thanks for following up with that. Interesting little quirk to know about there. – thatidiotguy May 22 '13 at 18:48

thatidiotguy · Answer 2 · 2013-05-22T18:38:22.413

0

$("#id").attr("type", "text");

EDIT:

$("#id").remove();
$("#containerOfInput").append("<input type="text" ........");

And you don't have to use append. You could use .html("newHTML") if you have a container that is holding just that input field.

edited May 22 '13 at 18:38

answered May 22 '13 at 18:32

thatidiotguy

7,901
11
53
98

I have tried this, it's not working. It is throwing an error that "can't change property type". I think this is because of some browser security issue. – Deepak Biswal May 22 '13 at 18:36
Quite possibly! I have never tried it. You might better off removing the original, and then adding. Let me edit. – thatidiotguy May 22 '13 at 18:36
I got it working. Here is the solution someone suggested above. $('input:password').prop('type','text'); – Deepak Biswal May 22 '13 at 18:40
@thatidiotguy: Your first code should work, if OP is using jQuery v.1.9 or above.. as I have [mentioned earlier](http://jquery.com/upgrade-guide/1.9/#input-attr-type-newvalue-in-oldie) – palaѕн May 22 '13 at 19:02
@DeepakBiswal: You have already got an answer I know, but just wanted to know which version of jQuery file are you using currently in your code? – palaѕн May 22 '13 at 19:04

score 0 · Answer 3 · answered May 22 '13 at 18:33

0

This should work:

$("#input_field_id").attr("type", "text");

answered May 22 '13 at 18:33

intellidiot

10,540
4
31
41

score 0 · Answer 4 · answered May 22 '13 at 18:39

Something like below should do the trick,

DEMO: http://jsfiddle.net/7t6hk/

    $('#password').focus(function () {
        this.type = 'password'
        $(this).removeClass('placeholder').val(function () {
            var val = $.trim(this.value);
            return (val == 'Password')?'':this.value;
        });
    }).blur (function () {
        $(this).val(function () {
            var val = $.trim(this.value);
            return (val == '')?'Password':this.value;
        });

        if (this.value == 'Password') {
            $(this).addClass('placeholder')
            this.type = 'text';
        }
    });

Just noticed that you want the part to change the type. You could do that by setting this.type.

Set this.type = 'text' for textfield
Set this.type = 'password' for password field

How to change the input type property in jQuery?

4 Answers4