View Full Version : focus problems...

12-24-2003, 12:00 AM
This page is having a problem that I can't see (yes I'm blind today).

Three input fields (HTML below), hitting TAB should cycle focus 1,2,3,1,2,3 and so on. On the last input tab sends focus to the frist. That is a must as this page would be in a FRAMESET.

I got the the javascript in place, but it don't want to work like I think it should. OnKeyDown, OnKeyUp, OnKeyPress all have the same problem as far as I can tell. Focus just passes between 2 of the three inputs, never seeming to stay on the 3rd.

Any ideas?


The attached file has the css and the js include files.
As is the case with all my web dev its JSP to IE6 (only)

<TITLE>Weekly Report</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<LINK rel="STYLESHEET" href="biav2.css" type="TEXT/CSS">
<META HTTP-EQUIV='expires' CONTENT='Fri, 1 Jan 1990 00:00:00 GMT'>
<META HTTP-EQUIV='cache-control' VALUE='no-cache, no-store, must-revalidate'>

<SCRIPT language="JavaScript" src="GenFunctions.js"></SCRIPT>
<SCRIPT language="JavaScript" src="ValFunctionsRedux.js"></SCRIPT>
<SCRIPT language="JavaScript" src="PopCalendar.js"></SCRIPT>
<SCRIPT type="TEXT/JAVASCRIPT" language="JavaScript">
function fClickNext(){
function fValidateReportDate(tbObject){
fIsValDate(tbObject, "mdy", "/", false, false)
function fAllInputsGood(){
return !(fIsBKColorBad(frmEditor.txtFromDate));
function fCheckSubmit(){
if (!(fAllInputsGood())) {
alert("Can not submit. Week Ending On is blank or is not formatted as it should be.");
} else {

document.onkeydown = fKillBackspace; // Found in GenFunctions.js

<BODY onLoad="fSetTextBoxActive(frmEditor.txtFromDate)">
<FORM id="frmEditor" name="frmEditor" method="post" action="frAnySectionSubmit.jsp">
<TABLE width="95%" align="center" border="0" cellpadding="0" cellspacing="0">
<TD align="right">
<INPUT id="hNextPage" name="hNextPage" type="hidden" value="frInputSection002.jsp">
<INPUT id="btnNext" name="btnNext" type="button" value="Next" class="stdbutton" tabindex="1" title="Click to Continue." onClick="fClickNext()" onKeyDown="fOnKeyDo(9,'fSetTextBoxActive(frmEditor.txtFromDate);')">
<TABLE width="95%" align="center" border="0" cellpadding="0" cellspacing="0">
<TD width="50%" align="left" class="bigtext"><B>Week Ending On</B></TD>
<TD width="50%" align="right">
<INPUT id="txtFromDate" name="txtFromDate" type="text" value="12/12/2003" class="sprshtbox" tabindex="2" title="Date format is : mm/dd/yyyy" size="10" maxlength="10" onKeyDown="fOnKeyDo(8,'window.event.cancelBubble = true;')">
<INPUT id="btnPopFromDate" name="btnPopFromDate" type="button" value='...' class="tinybutton" tabindex="3" title="Show Calender" onClick='popUpCalendar(this, frmEditor.txtFromDate, "mm/dd/yyyy")' onKeyDown="fOnKeyDo(9,'fSetAsNextTab(frmEditor.btnNext);')">

12-24-2003, 12:31 AM
I'm not really sure what you're talking about. The Calendar script was apparently only written for IE and Netscape 4. I don't have NS4, and I don't use IE, so I guess I'm S.O.L.

But from looking at the code, it looks like it can be modified to support the correct Document Object Model, which newer Netscape's (including Mozilla and Firebird) support.

Even then, looking at it in IE6, I'm still not really sure what you're talking about. I see a "Next" button, a "..." button (which opens the calendar), but I don't know about your 3 input fields...

Perhaps a better explanation? Or maybe is this the wrong code?

12-24-2003, 03:48 PM

Three <INPUT> tags, 2 are of type button and the other is of type text.

Hitting tab should cycle focus between the 3 <INPUT> tags.

As this page would be a member of a <FRAMESET> the last <INPUT> tag (the button that opens a calendar) must forward focus to the "Next" button instead of sending focus to another frame (the default behavior).

As you can see the popup calendar is not my script and is only included so you can get a complete picture. I have to write my pages for IE6 as that is what we use. This is not an Internet site, it is Intranet. It is not required that the page handle Mozilla and, as I don't care for fruitless work, it does not.

The code is correct (in that it is the code I wanted to show) I did not make it clear what the problem was. I apologize.

Hope that clears it up some.

Thank you,

12-24-2003, 06:30 PM
Well, I'd set the HTML attribute "tabindex" to 1 for the first, 2 for the second, and 3 for the third, then set an "onblur" event handler on the third field to push the focus back to the first.

12-26-2003, 04:24 PM
Yes, an OnBlur event does do that. But its too much. I am trying to catch the TAB key and then move focus.

OnBlur is good but its just too "ham fisted", thats why I am not using it. OnBlur is indiscriminant. I need a light touch. What if the focus is on the last input and the user clicks on the second input, onblur fires. I dont want it to fire then, so I dont use it.

Understand that this is the small page on the site. Other pages will use the same model and be much more complex. I need my events to fire only when they must.

I posted because this is not simple. I am not new. If it was as simple as using onblur I would have done it.

Please listen to the question. Why is it working that way?


12-26-2003, 07:59 PM
I got it now.

Just had to cancel the event as well as event bubbling.

The issues seem to have stemmed from my misunderstanding of how cancelBubble works. It seems to only cancel like events, not any event that follows. So by setting cancelBubble=true in an onKeyDown for some <INPUT type='text'> you stop onKeyDown in that element's <FORM> as well as at the document level. However another event caused by the first onKeyDown would still fire.

Setting event.returnValue=false stopped everything. I dont know if thats the best way, but its a way.