Moving HTML input type in IE8?
I have a website that uses a typical user creation form. This form puts the field name inside the textbox and uses a really simple script to clear the field name when the field gets focus.
When getting the user's password, I am currently clearing the field name ("Password" in this case) and then replacing the field type from text to password. This works fine in IE6, IE7, Firefox and Safari, but seems to have broken in IE8.
I am using string ...
theBox.getAttribute('type')=='text'
... check the type and then ...
theBox.setAttribute('type','password')
... change the type.
The script is now breaking on IE8 at this line. I think I need to go with div swapping, but I was wondering if anyone else comes across this and can fix it.
As with Internet Explorer 8, expressions are not supported in IE8 mode. See http://msdn.microsoft.com/en-us/library/ms537634(VS.85).aspx for more information .
Microsoft, having redesigned IE8 to be fully CSS2.1 compliant, once again took its implementation freedom in a bad place .... The standards say nothing about restricting access to element attributes like this, and MS claims that they did it by for security reasons.
One work with this will focus on the text field, replace it with a password field which, when blurred, collapses the text field. Let this following code demonstrate. It changes the "Password" textbox with focus to an empty password. Blurring this password, if the value is an empty string, the item is returned back to the 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"></script>
<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>
source to share