Javascript change input type dynamically doesnt work on IE8

Question

i have a input field for entering password in a webpage:

<input name="txtPassword" type="text" class="input2" id="txtPassword" value="Password" onfocus="txtOnFocus2('txtPassword','Password');" onblur="txtOnBlur2('txtPassword','Password');" />

in the initial state the usershould read "password" as the initial value and when he starts typing a password, the field should change to type password. Also when he sets it back to blank or initial value the field should change type to "text" and show password.

I wrote code an got it working on Firefox, Chrome, and safari and its not changing the type to password on IE 8.

this is the js code i made by editing an existing function code:

 function txtOnFocus2(elementId, defaultText)
 { 
    if (document.getElementById(elementId).value == defaultText)
    {
       document.getElementById(elementId).value = "";
  document.getElementById(elementId).type = "password";
    }
 }

 function txtOnBlur2(elementId, defaultText)
 {
    var textValue = document.getElementById(elementId).value;

    if (textValue == defaultText || textValue.length == 0)
    {
      document.getElementById(elementId).type = "text"; 
  document.getElementById(elementId).value = defaultText;
    }
 }

This is working fine in Firefox,chrome and safari but doesn't change field type on IE 8.

score 7 · Accepted Answer · answered Oct 01 '11 at 05:58

7

An alternative solution would be to change your approach altogether. The following technique degrades gracefully, is more accessible, and less JavaScript-dependant:

HTML

<div><label for="email">Email</label> <input type="text" name="email" id="email" /></div>
<div><label for="password">Password</label> <input type="password" name="password" id="password" /></div>

JavaScript

$('input')
    .focus(function() {
        $(this).css('background-color', 'white');
    })
    .blur(function() {
        if($.trim($(this).val()) == '') {
            $(this).css('background-color', 'transparent').val('');
        }
    });

CSS

input {
    background-color: transparent;
    padding: 2px;
}

label {
    color: gray;
    padding: 2px 4px;
    position: absolute;
    z-index: -1;
}

Live demo: http://jsfiddle.net/rjkf4/

answered Oct 01 '11 at 05:58

Ayman Safadi

11,502
1
27
41

thanks bro.. but my design is complex and it has lot of input fields.. and trying if i could write it specifically for one input.. – Mithun Satheesh Oct 01 '11 at 06:20
@RobG Yes. This technique will work with or without JavaScript. JS, in this case, is merely enhancing the technique by changing the background color to make the input more legible. In has no effect on the input field's functionality. – Ayman Safadi Oct 03 '11 at 04:02
@Ayman - so that would be "not javascript dependent". :-) You can do some of this stuff with CSS and attribute values, but unfortunately keeping properties and attributes in sync is a pain. – RobG Oct 03 '11 at 06:29
mithunsatheesh you can change the $("input"). part of the code to grab different elements. E.g. if you add a data-hide-password="true" attribute to the specific input fields, you can then change the JavaScript to $("[data-hide-password]"). – martinedwards Jul 31 '14 at 16:17

Mohsen · Answer 2 · 2011-10-01T06:57:24.443

2

I tried that before. There is no way to do this in IE. This is an security thing. But still you can set the value of a password input in IE. So you can remove the text input and replace it with a password input and then set the value of new input.

function replaceInput(input){
  var val = input.value,
      passwordInput = document.createElement('input');
  passwordInput.setAttribute('type', 'password');
  passwordInput.value = val;
  input.parentElement.appendChild(passwordInput);
  input.parentElement.removeChild(input);
};

JSFIDDLE

edited Oct 01 '11 at 06:57

answered Oct 01 '11 at 06:41

Mohsen

64,437
34
159
186

Working for me here, what browser are you trying on? – Mohsen Oct 01 '11 at 07:27

score 1 · Answer 3 · answered Oct 01 '11 at 05:12

1

Instead of:

foo.type = 'password';

try:

foo.setAttribute('type', 'password');

More info: http://www.javascriptkit.com/dhtmltutors/domattribute.shtml

answered Oct 01 '11 at 05:12

Ayman Safadi

11,502
1
27
41

So you can do that and let it crash in IE < 8, or you can replace the element with one of the type you want and have it work more widely. :-) – RobG Oct 01 '11 at 05:34
sorry its not solving the issue.. the password is not still changing the type. rest is working.. – Mithun Satheesh Oct 01 '11 at 05:53

score 1 · Answer 4 · answered Oct 01 '11 at 05:32

1

In IE 6 and 7 (at least) you can't change the type of an input that's already in the document. You must create a new input, set its type, then replace the one that's in the document, e.g.

  var el = document.createElement('input');
  el.type = 'password'
  var oEl = document.getElementById(elementId);
  el.id = oEl.id;
  // and so on for other properties that should be copied
  oEl.parentNode.replaceChild(el, oEl);

answered Oct 01 '11 at 05:32

RobG

142,382
31
172
209

not working in IE 8 + in firefox ,it removes styling of the input field even though i copied the class like el.class= oEl.class; as you mentioned. – Mithun Satheesh Oct 01 '11 at 05:52
It works in IE 8, I tested it. The property you should copy is **className**, not *class*. – RobG Oct 02 '11 at 11:29

score 1 · Answer 5 · answered Oct 01 '11 at 06:10

1

Something ugly that however should work (I don't have IE8 handy to test it) would be placing your field in a div and replacing the whole thing with container.innerHTML = "<input ...>" when needed.

answered Oct 01 '11 at 06:10

6502

112,025
15
165
265

score 1 · Answer 6 · answered Oct 01 '11 at 06:50

1

try this

http://www.electrictoolbox.com/jquery-toggle-between-password-text-field/

answered Oct 01 '11 at 06:50

Bala

691
5
10

score 0 · Answer 7 · answered Jul 25 '13 at 07:28

As an option you could just fake having a visible text in the password field by using a background image with that text on it.

$(".password").focus(function(){
    $(this).css("background-image", 'url(regular_bg.png)')
})
$(".password").blur(function(){
    if ($(this).val() == ""){
        $(this).css("background-image", 'url(bg_with_password_label_on_it.png)')
    }
})

Javascript change input type dynamically doesnt work on IE8

7 Answers7

Linked