473,700 Members | 2,845 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Capturing <Enter> and moving focus to next tabindex

Hello,

I have been playing with various Googled solutions for capturing the <Enter>
key to suppress form submission.

My first question is whether anyone has a script that works in all common
browsers? The script bellow is IE only. It fails FF 1.0 and NN 7.

Also, if I can trap the keypress I would like to use it to tab to the next
tabindex.

Is that possible? Ca I grab current focused tabindex?

TIA,

jg

__CODE__

<script language=javasc ript>
<!--

var bIsEnterKey = false;

function checkKeyPress() {

return !bIsEnterKey;

}

function setKeyPress(){
if(event && event.which){ //if which property of event object is
supported (NN4)
characterCode = event.which //character code is contained in NN4's which
property
}
else{
characterCode = event.keyCode;//character code is contained in IE's
keyCode property
}

bIsEnterKey = (characterCode. toString() == '13');

window.setTimeo ut("bIsEnterKey =false;",1000);

}
//-->

</script>

<form name="form1" method="post" action="xxx.htm l" onsubmit="retur n
checkKeyPress() ;" onkeypress="set KeyPress()">
<input type="text" name="textfield ">
</form>
Jul 23 '05 #1
7 20369
Hello Jerry,
capturing the <Enter> key to suppress form submission


When you hit <Enter> on a form that has focus, that triggers a submit
as you have said. Therefore, all you really need is the onsubmit event
handler and just return false. There is no need to check if the
<Enter> key was actually pressed. This will suppress form submission.

Jul 23 '05 #2

Simple:

<form onsubmit="retur n false">
..............
<input type="button" value="submit now" onclick="this.f orm.submit()">
</form>

onsubmit="retur n false" suppresses all enter-press and submit-buttons
submissions, leaving the form alone unsubmitted, then you use onclick to
have it submit.

Danny
On Mon, 11 Jul 2005 12:04:02 -0700, jerrygarciuh
<de*****@no.spa m.nolaflash.com > wrote:

--
Using Opera's revolutionary e-mail client: http://www.opera.com/mail/
Jul 23 '05 #3
Thanks for the reply,

Thing is that approach prevents form submission no matter what.

I want to submit the form only when button is clicked. One problem I am
running into is that onClick events for a submit button are fired when user
hits <Enter> while in a textfield. Hence I can't just set a
document.variab le when button is clicked or call a special sub when clicked.

Any thoughts?

jg

"web.dev" <we********@gma il.com> wrote in message
news:11******** **************@ g49g2000cwa.goo glegroups.com.. .
Hello Jerry,
capturing the <Enter> key to suppress form submission


When you hit <Enter> on a form that has focus, that triggers a submit
as you have said. Therefore, all you really need is the onsubmit event
handler and just return false. There is no need to check if the
<Enter> key was actually pressed. This will suppress form submission.

Jul 23 '05 #4
jerrygarciuh wrote:

Hi Jerry,
I have been playing with various Googled solutions for capturing the <Enter>
key to suppress form submission.
You certainly have your reasons to do so, but you're taking a dangerous
way IMHO: users are generally aware of their browsers' behavior, and
altering it in some way may always confuse them rather than enhance
their experience - changing the behavior of the ENTER key would likely
lead to such confusion.
My first question is whether anyone has a script that works in all common
browsers? The script bellow is IE only. It fails FF 1.0 and NN 7.


You won't have this in common to all browsers, since (1) the ENTER key
behavior isn't standard (which means that not all browsers behave this
way) and (2) old browsers used to exhibit the behavior on different key
events (keyup, keydown and keypress) which would require the code to
take into account some sort of key events flow (a nightmare, I've done
this before and it was ugly at best).

However, if targeting recent browsers is acceptable to you, then check
the following simple version (tested IE6, Mozilla 1.7 and Opera 8 and
Windows) - given the general issue it's unlikely to work in all recent
browsers, though - please test accordingly.
---
<form action="foo">
<input type="text" tabindex="1">
<input type="text" tabindex="2">
<input type="text" tabindex="3">
<input type="text" tabindex="4">
<input type="submit">
</form>

<script type="text/javascript">
function enter(form){
var fields=form.ele ments, a=[];

// add ENTER listeners
for(var ii=fields.lengt h; ii--;) {
if(fields[ii].type=="text") {
_e(fields[ii], "onkeypress ", enterListener);
a[a.length]=fields[ii];
}
}

// init the tabIndex behavior
a.sort(
function(a,b){
return a.tabIndex > b.tabIndex ? 1 : -1;
}
);

for(var j=0; j<a.length; j++){
a[j].next = a[j+1]||a[0];
}

// add the submission manager
_e(
form,
"onsubmit",
function(evt){
if(form.hasEnte red) {
form.hasEntered =false;
return false;
}
return true;
}
);

// ENTER listener
function enterListener(e vt){
evt=evt||window .event;
var el=this;
if((evt.keyCode ||evt.which)==1 3) {
form.hasEntered =true;
setTimeout(
function(){ el.next.focus() ; },
1
);
}
}
}

// event manager
function _e(obj, evt, func){
if(obj[evt]) {
obj[evt]=(function(h){
return function(evt){
return func.call(this, evt) && h.call(this, evt);
}
})(obj[evt]);
} else {
obj[evt]=func;
}
}

// --- test --- :-)
enter(document. forms[0]);
</script>
---
Regards,
Yep.
Jul 23 '05 #5
Lee
Yann-Erwan Perio said:

jerrygarciuh wrote:

Hi Jerry,
I have been playing with various Googled solutions for capturing the <Enter>
key to suppress form submission.


You certainly have your reasons to do so, but you're taking a dangerous
way IMHO: users are generally aware of their browsers' behavior, and
altering it in some way may always confuse them rather than enhance
their experience - changing the behavior of the ENTER key would likely
lead to such confusion.


I'd like to underscore that point. Changing web forms so that
they behave the way that you, or even your target audience, are
used to seeing forms behave, rather than the default way, is
almost always a bad idea. It's better for everybody to bite the
bullet and learn to use the default interface.

Jul 23 '05 #6
Yep,

Thank you so much! Your solution will save me much headbanging attempting
to obey my client who will not listen to me.

You are very kind to have taken so much time on my behalf!

jg

"Yann-Erwan Perio" <ye*@invalid.co m> wrote in message
news:42******** **************@ news.free.fr...
jerrygarciuh wrote:

Hi Jerry,
I have been playing with various Googled solutions for capturing the
<Enter> key to suppress form submission.


You certainly have your reasons to do so, but you're taking a dangerous
way IMHO: users are generally aware of their browsers' behavior, and
altering it in some way may always confuse them rather than enhance their
experience - changing the behavior of the ENTER key would likely lead to
such confusion.
My first question is whether anyone has a script that works in all common
browsers? The script bellow is IE only. It fails FF 1.0 and NN 7.


You won't have this in common to all browsers, since (1) the ENTER key
behavior isn't standard (which means that not all browsers behave this
way) and (2) old browsers used to exhibit the behavior on different key
events (keyup, keydown and keypress) which would require the code to take
into account some sort of key events flow (a nightmare, I've done this
before and it was ugly at best).

However, if targeting recent browsers is acceptable to you, then check the
following simple version (tested IE6, Mozilla 1.7 and Opera 8 and
Windows) - given the general issue it's unlikely to work in all recent
browsers, though - please test accordingly.
---
<form action="foo">
<input type="text" tabindex="1">
<input type="text" tabindex="2">
<input type="text" tabindex="3">
<input type="text" tabindex="4">
<input type="submit">
</form>

<script type="text/javascript">
function enter(form){
var fields=form.ele ments, a=[];

// add ENTER listeners
for(var ii=fields.lengt h; ii--;) {
if(fields[ii].type=="text") {
_e(fields[ii], "onkeypress ", enterListener);
a[a.length]=fields[ii];
}
}

// init the tabIndex behavior
a.sort(
function(a,b){
return a.tabIndex > b.tabIndex ? 1 : -1;
}
);

for(var j=0; j<a.length; j++){
a[j].next = a[j+1]||a[0];
}

// add the submission manager
_e(
form,
"onsubmit",
function(evt){
if(form.hasEnte red) {
form.hasEntered =false;
return false;
}
return true;
}
);

// ENTER listener
function enterListener(e vt){
evt=evt||window .event;
var el=this;
if((evt.keyCode ||evt.which)==1 3) {
form.hasEntered =true;
setTimeout(
function(){ el.next.focus() ; },
1
);
}
}
}

// event manager
function _e(obj, evt, func){
if(obj[evt]) {
obj[evt]=(function(h){
return function(evt){
return func.call(this, evt) && h.call(this, evt);
}
})(obj[evt]);
} else {
obj[evt]=func;
}
}

// --- test --- :-)
enter(document. forms[0]);
</script>
---
Regards,
Yep.

Jul 23 '05 #7
Lee wrote:
I'd like to underscore that point. Changing web forms so that
they behave the way that you, or even your target audience, are
used to seeing forms behave, rather than the default way, is
almost always a bad idea. It's better for everybody to bite the
bullet and learn to use the default interface.


Except in cases where you're building a web interface to something like an
old mainframe application. You may have several thousand users who have
years of experience hitting the enter key to go between fields. Adding
simple scripts to retain this user-expected functionality may improve
efficiency and accuracy, and make users happier.

In an internet context, tabbing on <enter> or auto-tabbing for things like
phone numbers is always a bad idea, IMO.

--
Matt Kruse
http://www.JavascriptToolbox.com
http://www.AjaxToolbox.com
Jul 23 '05 #8

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

11
24336
by: Denis Hierstein | last post by:
I need a function, witch make a break in a for-loop and wait for the <enter>-key ... when I use Pascal I just use the Read; or the ReadLn;-function, then the loop stop as long as the user push the <Enter>-key.
4
1648
by: bh | last post by:
So, I am debating with someone about this. He believe that you can set up so when the user presses Enter it acts just like Tab, so it follows the tab order between text boxes in .NET just like you can do in Access. I personally have never run across something like this, but I am still young in the .NET Programming world so perhaps I just haven't run across it yet. Thanks for the help.
7
6693
by: Susan Bricker | last post by:
I know that I saw some information concerning the <shift>+<enter> combination use to bypass launching an Access mdb application and enter the Access design workspace. Would someone please direct me to some information on how to disable this function (and how to re-enable it)? I believe that I saw some article that showed how to incorporate this into a command button. That would work for me as I have three different sign-on authorities...
6
2427
by: tor | last post by:
Hello How can I use an other key then TAB to move from one textBox to another?? Torfinn
0
1292
by: VMI | last post by:
If I'm in a multi-line textbox and I'm writing a postal address (ie. write ist line and press <Enter>, write 2nd line and press <Enter>, etc...) how can I make sure that the Enter key will always make the cursor jump to the following line in the textbox? For some reason, and this happens everywhere except on my development PC (and it's not consistent), if a user's writing a line and presses the <Enter> key, the program interprets that as...
2
9471
by: JP | last post by:
Hi, It's a login screen, so users enter their ID/Password and hit <ENTER> instead of clicking on Login button. But when they hit <ENTER> an Image Button gets clicked. I want to make my Login Button a default so that when users hit <ENTER> key, Login Button receives a click. Please help!
5
2019
by: DotNetGruven | last post by:
Hi, I have a web form which has: - Login area with - email textbox - password textbox - <enter> button to log in - search area with - string to search for textbox
2
1820
by: Rocio | last post by:
I have a aspx page, with 2 controls (ascx). Control1 contains a SEARCH button, and textbox to enter the string to search for. Control 2 contains a LOGIN button, and 2 text boxes to enter the username & password to login. Any user can perform a search, but if he applies for an account, he can login and performed an enhanced search. Currently, the SEARCH button responds when the user clicks <Enter>,
1
2337
by: almurph | last post by:
Hi everyone, I'm a newbie to vb.net. I have written some code to detect when a user presses the down-arrow, up-arrow and enter button. Essentially the user can arrow down or up through a list and the textbox is populated with the option when the user presses the enter button. This
0
8718
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
8642
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
9206
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
9066
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
8963
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
1
6558
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
4652
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
2
2383
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
2022
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.