Connecting Tech Pros Worldwide Forums | Help | Site Map

enter event with button

Alan Zhong
Guest
 
Posts: n/a
#1: Jul 20 '05
i am trying to similate an "ENTER" as a key to switch focus in a
sequence of text inputs. i don't want to use "event.keyCode" since i
want to do additional testing before i decide which text input i want
to focus next. the following are the test code i have, whenever i hit
"enter", it will act clicking the submit button. what can i do to
avoid this problem?

<!-- ############# code begins here ############ -->
<html>
<head>
<script language="JavaScript">
function jsKeyForeward(thisID)
{
var thatID = "t0";
if (thisID == "t0")
thatID = "t1";
if (thisID == "t1")
thatID = "t2";
if (thisID == "t2")
thatID = "t0";
document.forms[0].elements[thatID].focus();
}
function jsKeyBackward(thisID)
{
var thatID = "t0";
if (thisID == "t0")
thatID = "t2";
if (thisID == "t1")
thatID = "t0";
if (thisID == "t2")
thatID = "t1";
document.forms[0].elements[thatID].focus();
}
function jsKeyEvent(thisID)
{
if (event.keyCode == 13 || event.keyCode == 40)
{
if (event.keyCode == 13)
event.keyCode = 40;
jsKeyForeward(thisID);
}
else
{
if (event.keyCode == 38)
{
jsKeyBackward(thisID);
}
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<input type="submit" name="b0" value="submit" id="b0" /><br>
<input name="t0" type="text" id="t0"
onKeyDown="javascript:jsKeyEvent(this.id);" /><br>
<input name="t1" type="text" id="t1"
onKeyDown="javascript:jsKeyEvent(this.id);" /><br>
<input name="t2" type="text" id="t2"
onKeyDown="javascript:jsKeyEvent(this.id);" /><br>
</form>
</body>
</html>
<!-- ############# code ends here ############ -->

kaeli
Guest
 
Posts: n/a
#2: Jul 20 '05

re: enter event with button


In article <b09c98a8.0402171111.4272c08c@posting.google.com >,
alanchinese@yahoo.com enlightened us with...[color=blue]
> i am trying to similate an "ENTER" as a key to switch focus in a
> sequence of text inputs. i don't want to use "event.keyCode" since i
> want to do additional testing before i decide which text input i want
> to focus next. the following are the test code i have, whenever i hit
> "enter", it will act clicking the submit button. what can i do to
> avoid this problem?
>[/color]

Don't do this.
onKeyDown="javascript:jsKeyEvent(this.id);"
All events are script. Just do
onKeyDown="jsKeyEvent(this.id);"

Now, when a user presses the enter key, it is expected (in general) that
the browser will submit the form. Don't mess with that. It makes people
want to pelt you with rotten fruit.
If that's not what you meant, please clarify the question.

Oh, and the way people move from one input to another on a form is with
TAB. Not ENTER. Just in case what you actually wanted was to simulate
moving from one input to another. TAB moves inputs. ENTER submits.

HTH

--
--
~kaeli~
Condoms should be used on every conceivable occasion.
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace

Alan Zhong
Guest
 
Posts: n/a
#3: Jul 20 '05

re: enter event with button


thank you for your reply.
first of all, what did you mean "All events are script"? what's the
difference between script events and non-script events?

the code i provided here, is to make "enter" key work as a "tab" key
(just because all old green screen applications are using "enter"
instead of "tab"; furthermore, if there are more than one buttons, it
will confuse the users on which button they submit.) in the same
function jsKeyEvent(..) i already make the up and down arrow
working... but just can't make the "enter" working.

my question is, if i press the "enter" key, how to waken the
jsKeyEvent event handler, to decide which input box to focus on the
next?

thankx a lot again.


kaeli <tiny_one@NOSPAM.comcast.net> wrote in message news:<MPG.1a9c3c12358b2308989c38@nntp.lucent.com>. ..[color=blue]
> In article <b09c98a8.0402171111.4272c08c@posting.google.com >,
> alanchinese@yahoo.com enlightened us with...[color=green]
> > i am trying to similate an "ENTER" as a key to switch focus in a
> > sequence of text inputs. i don't want to use "event.keyCode" since i
> > want to do additional testing before i decide which text input i want
> > to focus next. the following are the test code i have, whenever i hit
> > "enter", it will act clicking the submit button. what can i do to
> > avoid this problem?
> >[/color]
>
> Don't do this.
> onKeyDown="javascript:jsKeyEvent(this.id);"
> All events are script. Just do
> onKeyDown="jsKeyEvent(this.id);"
>
> Now, when a user presses the enter key, it is expected (in general) that
> the browser will submit the form. Don't mess with that. It makes people
> want to pelt you with rotten fruit.
> If that's not what you meant, please clarify the question.
>
> Oh, and the way people move from one input to another on a form is with
> TAB. Not ENTER. Just in case what you actually wanted was to simulate
> moving from one input to another. TAB moves inputs. ENTER submits.
>
> HTH
>
> --[/color]
Ivo
Guest
 
Posts: n/a
#4: Jul 20 '05

re: enter event with button


> kaeli <tiny_one@NOSPAM.comcast.net> wrote[color=blue][color=green]
> > Don't do this.
> > onKeyDown="javascript:jsKeyEvent(this.id);"
> > All events are script. Just do
> > onKeyDown="jsKeyEvent(this.id);"
> >[/color][/color]
"Alan Zhong" <alanchinese@yahoo.com> wrote[color=blue]
> thank you for your reply.
> first of all, what did you mean "All events are script"? what's the
> difference between script events and non-script events?[/color]

Look carefully at the difference between the line above and the line below
that remark. Then remove the "javascript:" parts from your code.
[color=blue]
> the code i provided here, is to make "enter" key work as a "tab" key
> (just because all old green screen applications are using "enter"
> instead of "tab"; furthermore, if there are more than one buttons, it
> will confuse the users on which button they submit.) in the same[/color]

Buttons are not submitted. Forms are. How many forms are there on your
nostalgically green page? Don't all buttons submit the same form? Unless you
know your audience, you will need to explain this customized behaviour of
the Enter key on the page because I will definetely expect a submission when
I click Enter, unless I am in a textarea or so.
In your code, you 're trying to set an event property to the value of 40.
They are read-only. I 'm not sure I see the point in that:
if (event.keyCode == 13)
event.keyCode = 40;

HTH
Ivo


Michael Winter
Guest
 
Posts: n/a
#5: Jul 20 '05

re: enter event with button


On Thu, 19 Feb 2004 03:44:42 +0100, Ivo <no@thank.you> wrote:
[color=blue]
> "Alan Zhong" <alanchinese@yahoo.com> wrote
>[color=green]
>> [...] if there are more than one buttons, it will confuse the users
>> on which button they submit.) in the same[/color]
>
> Buttons are not submitted. Forms are.[/color]

Buttons are submitted as part of the forms that contain them, if they meet
the criteria for a "successful control"[1] In that way, you can give
significance to the button pressed during processing on the server.

Mike

[1] http://www.w3.org/TR/html4/interact/...html#h-17.13.2

--
Michael Winter
M.Winter@blueyonder.co.invalid (replace ".invalid" with ".uk" to reply)
kaeli
Guest
 
Posts: n/a
#6: Jul 20 '05

re: enter event with button


In article <b09c98a8.0402171845.723cef85@posting.google.com >,
alanchinese@yahoo.com enlightened us with...[color=blue]
> thank you for your reply.
> first of all, what did you mean "All events are script"? what's the
> difference between script events and non-script events?
>[/color]

Any browser event (onClick, onmousedoen, onkeyup, etc) fires script, if
the author tells it to. That is, onClick is by its very nature an event
that can either be handled by script or ignored. So telling it
"javascript:" is redundant UNLESS this page is part of an ASP
application and the default language (IE only) is specified as VBScript
and you wanted it to be handled by javascript. However, most of the time
what you see is the opposite - the default is javascript but the author
wants to execute vbscript. So, it would be onClick="vbscript:
btn_someprocedure"
[color=blue]
> the code i provided here, is to make "enter" key work as a "tab" key[/color]

Why? Because your users are all ancient?
I hope only YOUR users use this, because anyone else who surfs the net
will be confused as hell.
[color=blue]
> (just because all old green screen applications are using "enter"
> instead of "tab"; furthermore, if there are more than one buttons, it
> will confuse the users on which button they submit.) in the same
> function jsKeyEvent(..) i already make the up and down arrow
> working... but just can't make the "enter" working.[/color]

If you really want to prevent the enter key from submitting, you have to
catch it and stop it. This is with a keypress handler found easily via
Google.
[color=blue]
>
> my question is, if i press the "enter" key, how to waken the
> jsKeyEvent event handler, to decide which input box to focus on the
> next?[/color]

You'd have to give each textbox a tab order and somehow keep track of
which box focus was on and then set focus to the next when you catch the
enter key.


--
--
~kaeli~
Once you've seen one shopping center, you've seen a mall.
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace

Closed Thread


Similar JavaScript / Ajax / DHTML bytes