jQuery change input type

Question

Trying to change input type attribute from password to text.

$('.form').find('input:password').attr({type:"text"});

Why this doesn't work?

Fyi, you can use .attr('attrname', 'newvalue') to set a single attribute. — ThiefMaster
– ThiefMaster, Commented Jun 8, 2012 at 14:12
@thisgeek I'm genuinely impressed that you posted a duplicate link for a question more than two years old with a question from three years ago. — MiniRagnarok
– MiniRagnarok, Commented Mar 15, 2013 at 13:50

Alon · Accepted Answer · 2012-09-27 08:51:42Z

58

my solution:

    $('#myinput').clone().attr('type','tel').insertAfter('#myinput').prev().remove();

answered Sep 27, 2012 at 8:51

Alon

87911 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Dizzy Bryan High Over a year ago

very elegant and simple :)

terraling Over a year ago

Nice solution, although as per the accepted answer, problematic if you have events attached to the original input, which are removed too...

Jochem Kuijpers Over a year ago

How does .attr() work on the cloned element but not on the element itself?

Alon Over a year ago

Because the cloned element is not injected to the DOM yet, while the element itself is already in the DOM.

jonprasetyo Over a year ago

I think this should be the chosen answer!

Nick Craver · Accepted Answer · 2010-08-22 13:15:58Z

54

You can't do this with jQuery, it explicitly forbids it because IE doesn't support it (check your console you'll see an error.

You have to remove the input and create a new one if that's what you're after, for example:

$('.form').find('input:password').each(function() {
   $("<input type='text' />").attr({ name: this.name, value: this.value }).insertBefore(this);
}).remove();

You can give it a try here

To be clear on the restriction, jQuery will not allow changing type on a <button> or <input> so the behavior is cross-browser consistent (since IE doens't allow it, they decided it's disallowed everywhere). When trying you'll get this error in the console:

Error: type property can't be changed

edited Aug 22, 2010 at 13:15

answered Aug 22, 2010 at 12:43

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

9 Comments

Nick Craver Over a year ago

@Andy - Doesn't it get confusing with your body here and your head on meta? :)

David Thomas Over a year ago

@Nick, I'm too scared to edit your code, but I'm thinking you've got a typo: .inserBefore(this)

Nick Craver Over a year ago

@ricebowl - You can edit away whenever you see an error, or post a more correct answer :) I appreciate the comment, fixed!

Kevin Over a year ago

It's 2016 and jQuery allows to change attributes now.

Dhanuka777 Over a year ago

$(element).attr('type', 'text');

|

venkat7668 · Accepted Answer · 2015-08-18 06:08:27Z

22

USE prop instead attr

$('.form').find('input:password').prop({type:"text"});

answered Aug 18, 2015 at 6:08

venkat7668

2,7971 gold badge24 silver badges28 bronze badges

Comments

JasCav · Accepted Answer · 2012-11-20 19:22:04Z

10

I know I'm a little late to the game, but I was just able to do this in IE9 (it appears that Microsoft decided to allow it?). However, I had to do it with straight JavaScript. This is just a sample of a form with a dropdownlist that changes the field type depending on what is selected in the dropdown.

function switchSearchFieldType(toPassword) {
    $('#SearchFieldText').val('');
    if (toPassword === true) {
        $('#SearchFieldText').get(0).setAttribute('type', 'password');
    } else {
        $('#SearchFieldText').get(0).setAttribute('type', 'text');
    }
}

$('#SelectedDropDownValue').change(function () {
    if ($("select option:selected").val() === 'password') {
        switchSearchFieldType(true);
    }
    else {
        switchSearchFieldType(false);
    }
}).change();

answered Nov 20, 2012 at 19:22

JasCav

34.6k21 gold badges117 silver badges175 bronze badges

1 Comment

terraling Over a year ago

I like this solution because not destroying the original inputs leaves any attached events intact...

Roshana Pitigala · Accepted Answer · 2018-07-03 18:45:23Z

9

It's 2018 and jQuery does support this feature now. The following will work:

$('.form').find('input:password').attr("type","text");

edited Jul 3, 2018 at 18:45

Roshana Pitigala

8,8569 gold badges53 silver badges87 bronze badges

answered May 3, 2018 at 15:09

Callat

3,0845 gold badges35 silver badges49 bronze badges

Comments

prog_24 · Accepted Answer · 2015-06-23 18:51:24Z

7

This should work easily.

$("selector").attr('type', 'hidden'); 
//Changing it to hidden

answered Jun 23, 2015 at 18:51

prog_24

7991 gold badge13 silver badges27 bronze badges

Comments

Literate Corvette · Accepted Answer · 2020-02-17 22:19:22Z

0

    //Get current input object
    var oldInput = $('foo');
    //Clone a new input object from it
    var newInput = oldInput.clone();
    //Set the new object's type property
    newInput.prop('type','text');
    //Replace the old input object with the new one.
    oldInput.replaceWith(newInput);

answered Feb 17, 2020 at 22:19

Literate Corvette

4364 silver badges10 bronze badges

Comments

Pat · Accepted Answer · 2013-03-21 20:44:03Z

Here are two functions, accepting an array of selector(s) as a parameter that will accomplish this:

  // Turn input into Number keyboard
  function inputNumber(numArr) {
    if (numArr instanceof Array) {
      for (var i = 0; i < numArr.length; i++) {
        if ($(numArr[i]).length > 0) {
          var copy = $(numArr[i]);
          var numEle = copy.clone();
          numEle.attr("type", "number");
          numEle.insertBefore(copy);
          copy.remove();
        }
      }
    }
  }
  // Turn input into Email keyboard 
  function inputEmail(emailArr) {
    if (emailArr instanceof Array) {
      for (var i = 0; i < emailArr.length; i++) {
        if ($(emailArr[i]).length > 0) {            
          var copy = $(emailArr[i]);
          var numEle = copy.clone();
          numEle.attr("type", "number");
          numEle.insertBefore(copy);
          copy.remove();
        }
      }
    }
  }

You can then use this like:

  var numberArr = ["#some-input-id", "#another-input-id"];
  var emailArr = ["#some-input-id", "#another-input-id"];

  inputNumber(numberArr);
  inputEmail(emailArr);

Viktor · Accepted Answer · 2016-06-26 12:27:02Z

-1

function passShowHide(){
  if( $("#YourCheckBoxID").prop('checked') ){
    document.getElementById("EnterPass").attributes["type"].value = "text";
  }
  else{
    document.getElementById("EnterPass").attributes["type"].value="password";}

answered Jun 26, 2016 at 12:27

Viktor

1

1 Comment

Michael Gaskill Over a year ago

This doesn't actually answer the question. The question is how to change the type, and this code changes the value, and it even does that poorly. This might be a suitable answer for an entirely different question, but not for this question.

Haze · Accepted Answer · 2016-10-23 08:53:44Z

-1

This is pretty easy thou. This works pretty fine.

 $('#btn_showHide').on('click', function() {
    if($(this).text() == 'Show')
    {
      $(this).text('Hide');
      $('#code').attr('type', 'text');
    }
    else
    {
      $(this).text('Show');
      $('#code').attr('type', 'password');
    }
  });

answered Oct 23, 2016 at 8:53

Haze

1967 bronze badges

Collectives™ on Stack Overflow

jQuery change input type

10 Answers 10

5 Comments

9 Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

10 Answers 10

5 Comments

9 Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related