ansaurus

Question

HTML Input type swapping broken in IE8?

Answer 1

+1 A:

try this:

if (theBox.type == 'text') { ...

and

theBox.type = 'password';

Asaph 2009-09-16 21:52:37

+1 don't ever use getAttribute/setAttribute in an HTML document, they don't do what you want on IE and plain property access is easier to read. On the other hand, they *should* have worked in this case, so presumably the error is elsewhere not quoted in the question.

bobince 2009-09-16 22:16:32

I swapped out for direct property access with the same results. There isn't much else to the script. Here is the entire function:function passSwap(theBox){ if(theBox.type == 'text') { theBox.value = ''; theBox.type = 'password'; theBox.focus(); } else if(theBox.value.length == 0) { theBox.type ='text'; theBox.value = theBox.title; }}

2009-09-16 22:28:25

Answer 2

A:

IE doesn't allow you to change input type. You should create a new element and replace the existing one. Or show the first and hide the other one.

marcgg 2009-09-16 21:53:13

IE6 and IE7 both seem to be allowing it fine right now. I haven't had any issues with the form since users began complaining when they upgraded to IE8.

2009-09-16 22:04:54

Answer 3

A:

As of Internet Explorer 8, expressions are not supported in IE8 mode. For more information, see http://msdn.microsoft.com/en-us/library/ms537634%28VS.85%29.aspx.

Microsoft, having redesigned IE8 for full CSS2.1 compliance have taken their freedom of implementation to a bad place... again. The standards do not say anything about restricting access to element attributes like this and MS claim they have done it for security reasons.

One work around to this would be on focus of the text field, replace it with a password field, which upon blur swaps back the text field. Allow this following code to demonstrate. It changes a text box with the value 'Password' on focus to an empty password box. On blur of this password box, if the value is an empty string, the element is changed back to a text box with the value 'Password'.

<html>
<head>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"&gt;&lt;/script&gt;
 <script type="text/javascript">
  function change(event)
  {
   var evt = (window.event) ? window.event : event;
   var elem = (evt.srcElement) ? evt.srcElement : evt.target;
   var inputID = $(elem).attr('id');
   var inputValue = $(elem).attr('value');
   if(inputValue == 'Password')
   {
    var passwordInput = document.createElement('input');
    passwordInput.id = inputID;
    passwordInput.type = 'password';
    passwordInput.value = '';
    passwordInput.style.textAlign = 'center';
    passwordInput.style.color = 'black';
    passwordInput.onblur = changeBack;
    document.getElementById(inputID).parentNode.replaceChild(passwordInput, document.getElementById(inputID));
    window.setTimeout(function(){passwordInput.focus();}, 0);
   }
  }

  function changeBack(event)
  {
   var evt = (window.event) ? window.event : event;
   var elem = (evt.srcElement) ? evt.srcElement : evt.target;
   var inputID = $(elem).attr('id');
   var inputValue = $(elem).attr('value');
   if(inputValue == '')
   {
    var textInput = document.createElement('input');
    textInput.type = 'text';
    textInput.id = inputID;
    textInput.value = 'Password';
    textInput.style.textAlign = 'center';
    textInput.style.color = 'grey';     
    textInput.onfocus = change;
    document.getElementById(inputID).parentNode.replaceChild(textInput, document.getElementById(inputID));
   }
  }
 </script>
</head>
<body>
 <input id="inputField" type="text" value="Password" style="text-align:center;color:grey" onfocus="change(event)" />
</body></html>

Ambrosia 2009-11-10 10:25:43

Answer 4

A:

Or you can add label value Password, place it behind input with absolute positioning, set input background to transparent and create toggle function which will fire onfocus and onblur. That is how I did it.

c0mrade 2009-12-23 15:06:03

ansaurus

tags:

views:

answers:

HTML Input type swapping broken in IE8?

related questions