[Javascript] Mozilla OnFocus Problem

Wed Dec 3 14:19:48 CST 2003

Greetings,

I'm running into a problem that appears to be a bug in Mozilla's JavaScript 
implementation.  It seems like this would be a commonly-encountered issue 
but, after almost 2 hours of searching on Google and poking around, I can't 
find any evidence that anyone else has had this problem.  So, I have to 
admit it could be a stupid user error.

I am trying to use the onFocus event handler to skip several images with 
links that appear between fields on a form (field editing tools, for 
example) when tabbing between fields.  I have created a minimal page in 
which the error occurs.  The code is pasted below.  If it doesn't make it 
through the maillist software, it is temporarily up here:

    http://www.evermore.com/temp/js_error.html

This page works fine in the versions of IE I have tried.  In Mozilla 1.4 
and earlier (under both Linux and Windows XP, at least,) when the user tabs 
out of the first form field, the cursor appears to arrive in the second 
form field, as expected.  However, the user cannot type anything.  In order 
to type in the second field, the user must click on the field or tab 
through it and shift-tab back into it.  Obviously, this does not make for 
an ideal user interface.

Anybody know what the problem is or how to work around it?

Andrew Crawford
Javascript at Evermore.com

-----------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
    <title>JS Error</title>
</head>

<body bgcolor="#ffffff" text="#000000" link="#ff0000" vlink="#0000ff" 
alink="#ffff00">

<form name="jserror" action="js_error.html" method="post" 
enctype="multipart/form-data">
     <span class="text">Field 1:</span><br />
     <input name="form_1" type="text" size="50" maxlength="250">
     <p />
     <a href="http://www.evermore.com/" 
onFocus="document.jserror.form_2.focus();"><img 
src="http://www.evermore.com/evermore/evericon.gif" alt="Test Image" 
height="70" width="70" border="0" /></a>
     <p />
     <span class="text">Field 2:</span><br />
     <input name="form_2" type="text" size="50" maxlength="250">
     <p />
     <input name="submit" type="submit" value="Test Submit">
     </form>

</body>
</html> 