Changing the <Input> Type in Ie with JavaScript

Changing the input type in IE with JavaScript

You cannot dynamically change a the type of an input element in Internet Explorer.

One possible workaround would be to:

• Dynamically create a new element.
• Copy the properties of the old element into the new element.
• Set the type of the new element to the new type.
• Then replace the old element with the new element.

You may want to check the following article for a JavaScript implantation of the above:

• Change Input Element Type using JavaScript

Another option would be to statically create the two elements, but having only one visible at a time. The visibility and the focus would depend on the value of the elements. In this case, you may want to use something like this:

<script type="text/javascript">   
  function checkType() {
     var thisElement = document.getElementById('field_text');
     var otherElement = document.getElementById('field_password');

     if (thisElement.value === 'Password') {            
        otherElement.style.display = 'inline';
        thisElement.style.display = 'none';
        otherElement.focus();
     }
  }
</script>

<input type="text" value="Password" id="field_text" onfocus="checkType();" />
<input type="password" value="" style="display: none;" id="field_password" />

Change of input type is not working on Google Chrome and Safari browsers

You can't change the type of an input, so this is invalid code:

document.getElementById('fileatt').type='file';

Use two elements, hide one and show the other, toggle them.

Read more here:

change type of input field with jQuery

IE support for flipping input type between 'password' and 'text'?

IE does not allow you to change the attribute type of an input field.

Workaround:

<div id="container">
<input type="password" name="password" id="password" value="somepassword" />
<input type="text" name="passwordtext" id="passtext" value="somepassword" style="display:none;" />
<input type="checkbox" name="unmask" id="unmask" />
</div>

use jQuery, not raw Javascript. In IE, there is no addEventListener, just attachEvent(thanks to the brilliant people at Microsoft). Bind event listeners properly.

$('#unmask').click(function() {
    if($(this).is(':checked')) {
        $('#password').hide();
        $('#passtext').show();
};
});

input change event on enter key not working in IE

What you can do is use the keyup event.

Which gives you :

$("#inputBoxWidth").keyup(function() { // Your code });

Don't use the keydown event because if you want to get the value of the input it will give the value before the key was pressed.

:)

---

Related Topics