Change TextBox TextMode with jQuery

Question

I was wondering if someone knew the best way to switch from using the

    myTextBox.TextMode = TextBoxMode.Password;

to

  myTextBox.TextMode = TextBoxMode.SingleLine;

using client code and jQuery. I will have to do it on focus, along with deleting the whole text content of the textbox onFocus event.

score 4 · Accepted Answer · answered Feb 22 '11 at 21:07

4

$('#idOfYourTextbox').attr('type', 'text');

However, you cannot change the type of type="password" fields in IE (yay for useless "security" features).

answered Feb 22 '11 at 21:07

ThiefMaster

285,213
77
557
610

it's good, because I dont need to toggle from password to text and back - only from password to text once. So sounds like it's going to work... – dexter Feb 22 '11 at 21:12
I get type property can't be changed exception from the jQuery framework. Any ideas? – dexter Feb 22 '11 at 21:32
As I said, you cannot convert `password` to `text` in IE. You'd have to retrieve the value using `.val()`, delete the element and replace it with a new element. – ThiefMaster Feb 22 '11 at 22:58

score 1 · Answer 2 · edited May 23 '17 at 10:33

These webcontrols render completly different: the TextBox with mode SingleLine renders as an an input element with type=text, TextMode.Password changes the rendering to an input element with type=password.

So although in asp.net it is a single property, in jquery you will have to change the attribute type:

$('input.someclass').attr('type','password');

There are however some security limitations. See also this question.

If you also would like to change to TextMode.Multiline, you will have to change the input element to a textarea element.

score 1 · Answer 3 · answered Feb 22 '11 at 21:09

I don't think you can. Best thing to do is have two text boxes and then hide one on focus and show the other then focus it manually.

$('input:password').focus(function() {
     $(this).hide();
     $(this).siblings('input:text').show().focus();
});

This assumes they are both in the same container and the text box is hidden to start with.

Change TextBox TextMode with jQuery

3 Answers3