Bug Tracker

Opened 9 years ago

Closed 7 years ago

Last modified 5 years ago

#1536 closed bug (fixed)

Jquery cant change input type in IE

Reported by: icereaper Owned by:
Priority: major Milestone: 1.2
Component: core Version: 1.1.4
Keywords: Cc:
Blocked by: Blocking:

Description

Situation: <input type="text" class="testClass" value="Password"/>

Exspected Result: <input type="password" class="testClass" value=""/>

For all browsers: $(this).attr('type','password'); $(this).val();

IE gives JS Error cause it cant change the type.

Change History (12)

comment:1 Changed 9 years ago by arrix

Microsoft enforces read/write-once-rule for the type-attribute of <input>-elements. See http://docs.jquery.com/Core#.24.28_html_.29

comment:2 Changed 9 years ago by john

  • Resolution set to fixed
  • Status changed from new to closed

Attempting to do this now throws an exception in all browsers. Fixed in SVN rev [3096].

comment:3 Changed 9 years ago by abcdmitry

  • Resolution fixed deleted
  • Status changed from closed to reopened

There is a solution for this kind of problem described at http://www.dynamicsitesolutions.com/javascript/dynamically-changing-input-type/

It creates a clone of element with same attributes except for type. That might help because changing the type of input element via jQuery is a really sweet feature.

comment:4 Changed 9 years ago by john

  • Resolution set to fixed
  • Status changed from reopened to closed

Unfortunately, this particular hack is not feasible within jQuery (you also have to worry about issues like copying styles and events of the object) - since old jQuery matched sets may reference old versions of the input element, for example:

  var fields = $("input")
  $("input:first").attr("type", "hidden");
  fields[0].type == "text"
}}

Until there's a way around that, we're going to have to be content with the current solution.

comment:5 Changed 9 years ago by jespern

Not very smart making this throw an exception in all browsers. I was just about to file a bug on this.

It's possible outside IE, and Applesearch uses it to change the input type in Safari to 'search'. Guess I'll have to throw out the original element and replace it with a new one. Please just keep it in mind before making such a change.

comment:6 Changed 8 years ago by ArbuZz

  • Resolution fixed deleted
  • Status changed from closed to reopened

In my WordPress plugin I've used the following method of changing the type on the fly (cross-browser), maybe it may help someone or incorporated into the jQuery itself. This example alters type="password" to type="text":

var e = $(':password')[0]; e.replaceWith($(e.wrap('<label></label>').parent('label').html().replace(/type=\"?password\"?/, 'type="text"')));

comment:7 Changed 8 years ago by dmethvin

  • Resolution set to fixed
  • Status changed from reopened to closed

comment:8 Changed 8 years ago by ArbuZz

Sorry, doesn't seem to work as it should. For some reason jQuery fails to construct proper input element. Had to rewrite constructor in pure javascript.

comment:9 Changed 7 years ago by btech_saurabh

  • Resolution fixed deleted
  • Status changed from closed to reopened

Not a good way of doing this.

comment:10 Changed 7 years ago by btech_saurabh

Hi

I have an input type of text.

<input id="iPassword" value="Password" type="text"/>

in jQuery I want to change the type="password" when someone focus on it.

I tried this

$('#iPassword').focus(function(){

$(this).attr("type","password");

});

but it doesn't work.

any Ideas??

comment:11 Changed 7 years ago by dmethvin

  • Resolution set to fixed
  • Status changed from reopened to closed

Please do not reopen tickets to ask for programming help, just ask the question in the forums.

This issue is fixed as well as it can be considering IE's only-set-it-once rule for the type attribute of input elements.

comment:12 Changed 6 years ago by rwaldron

#7410 is a duplicate of this ticket.

Note: See TracTickets for help on using tickets.