PDA

Click to See Complete Forum and Search --> : problem with focus() in Netscape

anna
01-17-2004, 01:52 AM
Hi,

I'm trying to make an online order form. I have two columns with text input fields - a quantity field, and a totals field which is meant to display a calculated total. What I'm wanting to do is to prevent the user from being able to type anything into the totals fields.

I'm trying to do this with an onFocus trigger in the totals field, which bumps the focus to the next quantity field.

If the user clicks directly on the totals field, the focus is bumped as desired. If the user tabs to the totals field though, the carat moves on to the next field, but anything the user types is still in the totals field.

Does anyone have any idea what I'm doing wrong? Is there a better way of doing this?
For what it's worth, I don't have this problem in IE.

The code looks like this:

<td>
<input type="text"
maxlength="8"
name="joe"
size="8"
onFocus="document.orderform.bob.focus();"></td>

<td>
<input type="text"
maxlength="4"
name="bob"
size="4"
onFocus="dostuff();"
onChange="doMoreStuff();"></td>
Pittimann
01-17-2004, 05:09 AM
Hi!

To really solve the whole problem you'd better posted the full code (entire form and script).

As far as avoiding user input into the total field is concerned, you can simply add an attribute to its' tag: readonly. This works in most browsers. To make it safe also for browsers like NS4.x (ignores the readonly attribute) you can also add onfocus="this.blur()".

The user would no longer be able to enter anything there, whereas your script could...

As stated above: nobody here knows, what the two functions you call onFocus="dostuff();" and onChange="doMoreStuff();" actually do. For a complete "diagnosis" you should post everything.

Cheers - Pit
anna
01-17-2004, 09:27 PM
Thanks for your response.
I had tried doing the "this.blur()" thing before, on it's own and in combinations with focus(), and it didn't solve anything.

I didn't know about the readonly attribute, and if I cannot find a better solution, I will use that instead of trying to refocus.
Not sure what I will do about those NS4.x users though, since I tried various combinations of readonly, blur() and focus(), and was having problems with them.

My script is rather long, so I'll post a trimmed down version of the whole page (I cut out the extra functions, since they don't seem to make any difference to the problem):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Order Form</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>

<body class="normal">

<form action="cgi-bin/formmail.cgi" method="POST" name="orderform">

<table border="1">

<tr>
<td>Product 1</td>

<td>
<input type="text"
maxlength="4"
name="product1"
size="4">
</td>
<td>$37.50</td>
<td>
$<input type="text"
maxlength="8"
name="total1"
size="8"
value="0.00"
onFocus="this.blur(); document.orderform.product2.focus();"
></td>
</tr>

<tr>
<td>Product 2</td>
<td>
<input type="text"
maxlength="4"
name="product2"
size="4">
</td>
<td>$130.00</td>

<td>
$<input type="text"
maxlength="8"
name="total2"
size="8"
value="0.00"
onFocus="document.orderform.product3.focus();"></td>
</tr>

<tr>
<td>Product 3</td>
<td>
<input type="text"
maxlength="4"
name="product3"
size="4">
</td>
<td>$4.50</td><td>$<input type="text"
maxlength="8"
name="total3"
size="8"
value="0.00"
onFocus="document.orderform.reset.focus();"></td>
</td>
</tr>

</table>

<input type="submit"
name="submit"
value="Submit form">
<input type="reset"
name="reset"
value="Reset form">
</form>

</body>
</html>
Pittimann
01-18-2004, 02:16 AM
Hi!

Odd phenomenon you are dealing with. Couldn't find a logical reason for it. In IE (v 6) and NS4.7 your (correct) code works properly. I changed the tags of the inputs you do not want the user to enter something like this:

<input type="text" maxlength="8" name="total1" size="8" value="0.00" onFocus="this.blur(); document.orderform.product2.focus();" onkeydown="this.blur(); document.orderform.product2.focus();" readonly>

Please do so with the others as well. This is tested with IE6, NS4.7, Mozilla1.5 and Opera 6.05.

In Opera, the behaviour is still strange. Using the tab key to proceed from product1 to (actually) total1, being "redirected" to product2, the text in total1 is highlighted and there is no blinking cursor in product2. Nevertheless, data are entered in product2...

I am going to play around on this but I hope the altered tag will already help.

Cheers - Pit
Pittimann
01-18-2004, 03:40 AM
Hi!

I played around a bit and found out the following:

Mozilla and higher NS versions only fire the onfocus, when the element is clicked and not when it is accessed by tabbing.

Setting an element to "disabled" will also disable the accessibility by pressing the tab key.

The conclusions:

readonly is not necessary because using disabled also prevents the user from entering data,

the this.blur is no longer necessary. All you want (as far as modern browsers are concerned) is already done by disabling the totals fields. The following code uses an onfocus to fool browsers like NS4.x which ignore disabled and readonly.

Your form could now look like this:

<form action="cgi-bin/formmail.cgi" method="POST" name="orderform">
<table border="1">
<tr>
<td>Product 1</td>
<td>
<input type="text" maxlength="4" name="product1" size="4">
</td>
<td>$37.50</td>
<td>
$<input type="text" maxlength="8" name="total1" size="8" value="0.00" onFocus="document.orderform.product2.focus();" disabled>
</td>
</tr>
<tr>
<td>Product 2</td>
<td>
<input type="text" maxlength="4" name="product2" id="prod2" size="4">
</td>
<td>$130.00</td>
<td>
$<input type="text" maxlength="8" name="total2" id="tot2" size="8" value="0.00" onFocus="document.orderform.product3.focus();" disabled>
</td>
</tr>
<tr>
<td>Product 3</td>
<td>
<input type="text" maxlength="4" name="product3" size="4">
</td>
<td>$4.50</td><td>$<input type="text" maxlength="8" name="total3" size="8" value="0.00" onFocus="document.orderform.reset.focus();" disabled></td>
</td>
</tr>
</table>
<input type="submit" name="submit" value="Submit form">
<input type="reset" name="reset" value="Reset form">
</form>

With this, the Opera "bug" I described in my previous post can no longer appear. So the 4 browsers I mentioned now deal with your form the way you want. :p

Cheers - Pit
anna
01-18-2004, 05:44 AM
Thank you very much! :D Very cool!
Pittimann
01-18-2004, 05:48 AM
Hi!

You're welcome! :cool:

Cheers - Pit