js element manipulation IE7 issue

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
invisibled
Forum Contributor
Posts: 112
Joined: Sun Apr 29, 2007 3:35 pm
Location: New Westminster

js element manipulation IE7 issue

Post 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 :)
User avatar
kaszu
Forum Regular
Posts: 749
Joined: Wed Jul 19, 2006 7:29 am

Re: js element manipulation IE7 issue

Post 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.
invisibled
Forum Contributor
Posts: 112
Joined: Sun Apr 29, 2007 3:35 pm
Location: New Westminster

Re: js element manipulation IE7 issue

Post by invisibled »

ahh, yeah thats what i think i'll do. Such a pain in the ass hahaha
User avatar
Darhazer
DevNet Resident
Posts: 1011
Joined: Thu May 14, 2009 3:00 pm
Location: HellCity, Bulgaria

Re: js element manipulation IE7 issue

Post 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');
 
Post Reply