Question

OK, so there’s a question that gets asked around here a lot about Firefox not responding to window.event, where instead you need to add an extra parameter to the function. I have no problems with that; my problem is how the heck do I do that if I want to assign the event listeners from within a different Javascript function?

Basically, what I’m trying to do is the common effect when you can have a form box that has grey text that would say, for example, “Your name…” and then when you click the box the text disappears and the color changes to black; unfocus with the box still empty and the prompt text will return.

Now, instead of coding this directly for every page I want to use it on, I’m trying to make a function that I can call with the ID of the form and it will automatically apply this to every input element. Here’s the code:

function fadingForm(formElementID, endColor)
{
  var form = document.getElementById(formElementID);

  for(var i = 0; i < form.elements.length; i++)
  {
    form.elements[i].originalValue = form.elements[i].value;
    form.elements[i].originalColor = form.elements[i].style.color;
    form.elements[i].changedColor  = endColor;

    // Somehow I need to get that event parameter in here I guess?
    // I tried just putting the variable event in as a parameter,
    //   but as you'd expect, that doesn't work.
    form.elements[i].onfocus = function() { focused(); };
    form.elements[i].onblur  = function() { blurred(); };
  }
}

function focused(e)
{
  evt = e || window.event;
  element = evt.target;

  if(element.value == "" || element.value == element.originalValue)
  {
    element.value = "";
    element.style.color = element.changedColor;
  }
}

function blurred(e)
{
  evt = e || window.event;
  element = evt.target;

  if(element.value == "" || element.value == element.originalValue)
  {
    element.value = element.originalValue;
    element.style.color = element.originalColor;
  }
}

And of course, this works perfectly in Chrome, Safari, etc…just not Firefox.

Answer 1

Your event listeners focused and blurred accept an event object e, but you never provide an event object. The event object that is provided to the anonymous wrapper functions is never used nor passed to focused/blurred. Thus, e is always undefined.

Instead, when you set up your listeners, do:

form.elements[i].onfocus = function(e) { focused(e); };
form.elements[i].onblur  = function(e) { blurred(e); };

Or even:

form.elements[i].onfocus = focused;
form.elements[i].onblur  = blurred;

So that the event object is passed directly into your listener functions.