Page 1 of 1

js element manipulation IE7 issue

Posted: Thu Jan 15, 2009 3:28 pm
by invisibled
Hey everybody

I have an issue in ie7 that i can't seem to debug and was wondering if anybody can lend a hand. Go to http://beta.ourjoules.com/ in anything but IE and click inside of the login inputs. The text should clear for the email and it should clear and change to password for the password field. In IE 7 it doesnt change it to password nor does it clear it. Here is my code.

Code: Select all

//Clear's the input onfocus, and type to password where nessesary
function clear_input(element){
    if(element.value == "Password"){
        element.type = "password";
        element.value = "";
    }
    element.value = "";
}
 
//Restores the default value for the elements
function restore_default(element){
    if(element.value == ''){
        element.value = element.name.substring(0, 1).toUpperCase()
        + element.name.substring(1, element.name.length);
        element.type = "text";
    }
}

any suggestions are welcomed :)

Re: js element manipulation IE7 issue

Posted: Thu Jan 15, 2009 3:40 pm
by kaszu
In IE you can't change the "type" if I remember correctly.
Solution would be to have 1 text input with value "Password" and one password input with type "password". When text input is focused, then show password input, add focus to it and hide text input.

Re: js element manipulation IE7 issue

Posted: Thu Jan 15, 2009 3:44 pm
by invisibled
ahh, yeah thats what i think i'll do. Such a pain in the ass hahaha

Re: js element manipulation IE7 issue

Posted: Fri Dec 25, 2009 10:12 am
by Darhazer
I've just wrote this 2 functions tonight (at 2 AM) for clearing input in both text and password fields. I was going to post it to Code snippets, but since there is a topic for this...

It does not use any JS framework, pure JS, and it's tested in FF 3, IE 8 and Chrome 3.
Not the best code, but may be useful for someone...

Code: Select all

 
function decorate(id, defaultValue)
{
    element = document.getElementById(id);
    if (!element)
        return;
    
    element.onfocus = function(){
        if (this.value == defaultValue)
            this.value = '';
    };
    element.onblur = function() {
        if (this.value == '')
            this.value = defaultValue;
    };
    if (element.value == '')
        element.value = defaultValue;
}
 
function decoratePassword(id, defaultValue) {
    var original = document.getElementById(id);
    if (!original)
        return;
    
    original.style.display = 'none';
    
   var element = document.createElement('input');
   element.type = 'text';
   element.value = defaultValue;
   element.size = original.size;
   element.style.offsetTop = original.offsetTop;
   element.style.offsetLeft = original.offsetLeft;
   document.getElementById(id).parentNode.appendChild(element);
   
   element.onfocus = function(){
        this.style.display = 'none';
        original.style.display = 'block';
        original.focus();
   }
   original.onblur = function(){
        if (this.value == '') {
            this.style.display = 'none';
            element.style.display = 'block';
        }
   }
}
 
// example usage
decorate('Username', 'Enter your username');
decorate('Email', 'Enter your e-mail');
decoratePassword('Password', 'Enter your password');
decoratePassword('Password2', 'Confirm your password');