Yes it’s working in regards to using jQuery 1.4.2 but still not working well in IE, totally fails in IE 9 and there is a minor bug in IE 8, surprisingly works better in IE8 and even IE 7 than it does in IE 9. See my comment above I left on David’s reply.
One of the problems with IE9 is that it is the ONLY browser that understands both JScript and JavaScript and so needs to be handled as a special case.
Presumably jQuery 1.4 was released before IE9 came along and so does not cater for the one browser that supports both languages. I had to make significant changes to the plain JavaScript code for handing change of input type specifically to cater for IE9 and presumably the same change has been applied to jQuery at some point but probably a more recent version than 1.4.
Hi felgall,
I’m probably missing something obvious, but I still can’t get your code to work for me in the latest Chrome on Linux.
I reloaded the page you link to in post 4 to ensure I have the latest version, then copied it verbatim to an empty file.
I don’t see any errors in the console, but the masked text is not revealed when I click into the input field.
Here’s my code:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>MAsk passwords</title>
</head>
<body>
<input type="password" name="pass" id="pass">
<script>
if (window.addEventListener)
addEvent = function(ob, type, fn ) {
ob.addEventListener(type, fn, false );
};
else if (document.attachEvent)
addEvent = function(ob, type, fn ) {
var eProp = type + fn;
ob['e'+eProp] = fn;
ob[eProp] = function(){ob['e'+eProp]( window.event );};
ob.attachEvent( 'on'+type, o[eProp]);
};
(function() {
var p = document.getElementById('pass');
/*@cc_on
@if (@_jscript)
@if (@_jscript_version < 9)
var inp = document.createElement("<input name='pass'>");
inp.id = 'pass1';
inp.type = 'text';
inp.value = 'password';
p.parentNode.replaceChild(inp,p);
p = document.getElementById('pass1');
@else
p.type = 'text';
p.value = 'password';
@end
@else */
p.type = 'text';
p.value = 'password';
/* @end @*/
passFocus = function() {
if ('text' === this.type) {
/*@cc_on
@if (@_jscript)
var inp = document.createElement("<input name='pass'>");
inp.id = 'pass';
inp.type = 'password';
inp.value = '';
this.parentNode.replaceChild(inp,this);
inp.focus();
@else */
this.value = '';
this.type = 'password';
this.focus();
/* @end @*/
}
}
addEvent(p, 'focus', passFocus);
})();
</script>
</body>
</html>
a differente solution using two overlaid fields http://jsfiddle.net/psUe4/20/
<form>
<label>
<input id="text" type="text"></input>
<input id="pass" type="password"></input>
</label>
</form>
<script>$(function () {
var $pass = $('#pass');
var $text = $('#text');
$text.bind('blur keyup', function() {
var val = $text.val();
$text.addClass('white');
$pass.removeClass('white');
$pass.val(val);
}).bind('focus', function() {
$text.removeClass('white');
$pass.addClass('white');
});
});</script>
The problem with that approach is that all browsers then use two fields where only the almost dead IE8 actually needs it. All more modern browsers will allow you to change the type.
Yeah, this method kills Chrome unfortunately.
Felgall - any joy getting your method to work?
It worked when I first wrote it so presumably there’s just another typo there somewhere. I had to completely rebuild my computer a couple of weeks ago and so have only just finished reinstalling IE8 and IE9. I’ll take a look at it over the weekend and work out what’s wrong with it in whichever of those browsers it currently has the problem with.
I am going to add a working example to that page as well.
There were a couple of other typos in my code. I have now corrected them and the code now works in IE8 and IE9 as well as modern browsers.
I have also attached a live example of the code to that page which is what I used to test.
Since the link is now quite a few posts back I’ll include it again: http://javascriptexample.net/domform08.php
Hi Stephen,
At the risk of being a PITA, your example doesn’t work for me (in Chrome, FF or IE).
If you click into the password field, the text is masked, but when you click into one of the dummy fields, then back into the password field, it stays masked (the OP wanted it to be revealed until the user starts typing).
That code only has the focus event to mask the field when it gets the focus. It then stays masked. The assumption being that once the visitor gets to that field that they will start typing their password. It is after all just intended as an example of how to change the type.
If the person is going to be able to go to that field and then leave without typing anything and you want it to change back when they do that then you’d need to add code for a blur event that tests if the field is empty and if so runs the equivalent code in reverse to unmask the field. That is, you’d add the following code:
passBlur = function() {
if ('password' === this.type && '' === this.value) {
/*@cc_on
@if (@_jscript)
@if (@_jscript_version < 9)
var inp = document.createElement("<input name='pass'>");
inp.id = 'pass';
inp.type = 'text';
inp.value = 'password';
this.parentNode.replaceChild(inp,this);
setTimeout(inp.focus,5);
@else
p.type = 'text';
p.value = 'password';
@end
@else */
this.value = 'password';
this.type = 'text';
/* @end @*/
}
}
addEvent(p, 'blur', passBlur);