I've wrote some code that will allow me to have some greyed out text on an input form, and when the user focuses on it, the text will disappear and bee ungreyed out, if that makes sense...

function editableAlt (elem, colour1, colour2) {
    var elem = document.getElementById(elem);
    elem.onfocus = function () {
        if(this.value == this.defaultValue) {
            this.value = ""; // remove the default text, so the user can enter their own
            this.style.color = "#" + colour1; // change the text colour 
        }
    };
    elem.onblur = function () {
        if(this.value == '') {
            this.value = this.defaultValue; // user left it blank? revert back to the default text
            this.style.color = "#" + colour2; // and change the colour back too
        }
    }
}

This is working on most pages, but on one for some reason the onfocus and onblur aren't working at all - for example if I change it to onclick it triggers no problem.

Is there anything else I can try? :( I am using JQuery, but removing that doesn't seem to effect it at all.

Cheers

I've wrote some code that will allow me to have some greyed out text on an input form, and when the user focuses on it, the text will disappear and bee ungreyed out, if that makes sense...

function editableAlt (elem, colour1, colour2) {
    var elem = document.getElementById(elem);
    elem.onfocus = function () {
        if(this.value == this.defaultValue) {
            this.value = ""; // remove the default text, so the user can enter their own
            this.style.color = "#" + colour1; // change the text colour 
        }
    };
    elem.onblur = function () {
        if(this.value == '') {
            this.value = this.defaultValue; // user left it blank? revert back to the default text
            this.style.color = "#" + colour2; // and change the colour back too
        }
    }
}

This is working on most pages, but on one for some reason the onfocus and onblur aren't working at all - for example if I change it to onclick it triggers no problem.

Is there anything else I can try? :( I am using JQuery, but removing that doesn't seem to effect it at all.

Cheers

• javascript
• onblur
• onfocus

• Works in my IE6: jsbin./aduni You're doing something else wrong elsewhere in your code. – Crescent Fresh Commented Sep 25, 2009 at 15:12
• Thanks, I even tried this using Jquery to no avail: if($("#Absence_Hours").length > 0) { $this = $(this); // cache the variable $this.focus(function () { alert('test'); }); } Changing the focus() to click() works fine though... – Nick Commented Sep 28, 2009 at 9:42

2 Answers 2

I've found that IE is extremely unforgiving when it es to javascript errors. I ran your code through jslint and got the following errors:

Error: Problem at line 2 character 14: 'elem' is already defined.

var elem = document.getElementById(elem);

Problem at line 10 character 23: Use '===' to pare with ''.

if(this.value == '') {

Problem at line 14 character 6: Missing semicolon.

}

Implied global: document 2

Not trying to skimp on helping your or anything, but I'm guessing if you fix those errors, you'll see more desirable results. Good luck!

What an idiot, sorry guys! I tried removing all other Javascript files, but missed the most important one was it was wrapped in PHP and IE if statements, d'oh!

Suckerfish sfFocus was being applied which caused it to break: http://htmldog./articles/suckerfish/shoal/

Sorry :( & many thanks for the suggestions