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.

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.

• javascript
• jquery
• placeholder

Share Improve this question Follow edited Aug 11, 2013 at 1:39 Rich 5,73199 gold badges4444 silver badges6363 bronze badges asked May 22, 2013 at 18:31 Deepak BiswalDeepak Biswal 4,32022 gold badges2121 silver badges3737 bronze badges 3

• You do know that unsupported browsers will automatically fallback to the text type ? – adeneo Commented May 22, 2013 at 18:35
• possible duplicate of JQuery change type of input field – Evan Davis Commented May 22, 2013 at 18:35
• Just use a js placeholder plugin like this one: github./mathiasbynens/jquery-placeholder – adamdehaven Commented May 22, 2013 at 18:36

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

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

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

This should work:

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

$("#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.

Something like below should do the trick,

DEMO: http://jsfiddle/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