July 8, 2008 09:13pm pdt

1. war1 36,025
2. b0lsc0tt 11,750
3. mtz1of4 10,123
4. mplungjan 3,700
4. Kravimir 3,700
6. hielo 2,400
7. LordOfPorts 2,052
8. briancassin 2,000
8. rindi 2,000
8. ysfx 2,000
8. and235100 2,000
8. ddas_auth 2,000
8. TK-77 2,000
8. cpkilekofp 2,000
8. ygoutham 2,000
8. jonesc3 2,000
8. DaveHowe 2,000

1. war1 51,675
2. mtz1of4 42,318
3. b0lsc0tt 15,750
4. TName 5,000
5. Kravimir 3,700
5. mplungjan 3,700
7. araim 3,500
8. rindi 3,000
9. and235100 2,800
10. hielo 2,400
11. Merete 2,380
12. LordOfPorts 2,052
13. briancassin 2,000
13. bnaveke 2,000
13. ysfx 2,000
13. ygoutham 2,000
13. bigbilly... 2,000
13. Sheharya... 2,000
13. DaveHowe 2,000
13. raj3060 2,000
13. TK-77 2,000
13. Maverick... 2,000
13. Zvonko 2,000
13. msmolyak 2,000
13. ravs 2,000
13. batry_boy 2,000
13. sah18 2,000
13. asvforce 2,000
13. Raisor 2,000
13. nixfreak 2,000
13. ddas_auth 2,000
13. Irial 2,000
13. archang3l 2,000
13. eoinosul... 2,000
13. KCTS 2,000
13. cpkilekofp 2,000
13. sam265 2,000
13. DJ2liveUK 2,000
13. johnb6767 2,000
13. jonesc3 2,000
13. mem99999 2,000

09.06.2007 at 07:15AM PDT, ID: 22810803

	[x] Attachment Details

[x]

The Solution Rating System

With so many solutions, how can you tell which solutions are most likely to help you and which ones are not? To provide you with a tool to use, we rate our solutions based on various elements that most accurately determine if a solution is a quality solution. To explain what factors affect the solution rating, here are the elements we take into consideration when formulating our solution rating.

The Grade of the Solution
The Zone Rank of the Expert Providing the Solution
The Number of Author and Expert Comments
The Number of Experts Contributing
The Feedback of the Community

Your Input Matters
Because of the way the system is set up, the most important variable in this equation is you. As a member of Experts Exchange, you are able to cast your vote on the quality of the solutions in regard to how complete, accurate, helpful and easy to understand each solution is. When you provide your feedback, each rating is adjusted accordingly. So, if you see a solution that has a poor rating that you think is a good solution, let us know by rating it. As you do, the rating will be adjusted and will become more accurate for other members of our site.

If you have any suggestions that you would like to make for our rating system, please ask a question in the Suggestions Zone of Community Support.

Thank you!

6.6

Change Enter key behaviour to Tab in Mozilla and IE

Zones: Mozilla Web Browser, JavaScript

Tags: enter, javascript, key, tab, change

How can I change, in Javascript, key behaviours so that when the Enter key is pressed it acts like the Tab key? I would like it work in both IE and Firefox

Start your free trial to view this solution

Question Stats

Zone: Software

Question Asked By: bogorman

Solution Provided By: TName

Participating Experts: 2

Solution Grade: A

Translate:

Loading Advertisement...

Microsoft

Internet Protocols
Applications

Development
OS

Hardware
Windows Security

Apple

Operating Systems
Hardware

Programming
Networking

Software

Internet

Search Engines
File Sharing
WebTrends / Stats
Spy / Ad Blockers

Web Browsers
New Net Users
Web Development
Chat / IM

Anti Spam
Web Servers
Anti-Virus
Email Clients

Gamers

Tips
Online / MMORPG
Puzzle
Emulators

Action / Adventure
Role Playing
Consoles
Game Programming

Strategy
Sports
Misc
Computer Games

Digital Living

Hardware
New Net Users
New Users

Software
Digital Music
Gaming World

Home Security
Apple
Networking Hardware

Virus & Spyware

Vulnerabilities
IDS
Encryption
Anti-Virus

Operating Systems Security
Software Firewalls
WebApplications
Cell Phones

Operating Systems
Internet
Hardware Firewalls

Hardware

Handhelds / PDAs
Displays / Monitors
Components
Networking Hardware

Peripherals
Laptops/Notebooks
Storage
Servers

Desktops
New Users
Misc
Apple

Software

System Utilities
Industry Specific
Network Management
Photos / Graphics
Page Layout
VMWare
Misc
Web Development

OS
CYGWIN
Voice Recognition
Message Queue
Quality Assurance
Security
Firewalls
MultiMedia Applications

Development
Database
Office / Productivity
Business Management
OS/2 Apps
Server Software
Internet / Email

ITPro

OS
Storage
Encryption
Operating Systems Security
Apple Hardware
Laptops & Notebooks
Servers
Networking Hardware
Peripherals

Devices
Displays / Monitors
WebTrends / Stats
Search Engines
Firewalls
WebApplications
IDS
Vulnerabilities
Email Clients

File Sharing
Spy / Ad Blockers
Web Browsers
Web Servers
Networking
Anti-Virus
Chat / IM
Anti Spam

Developer

Web Servers
Web Browsers
Game Programming
Dev Tools
Industry Specific
Office / Productivity

Database
CYGWIN
Web Development
Search Engines
File Sharing
WebTrends / Stats

Programming
Content Management
Application Servers
Protocols

Storage

Removable Backup Media
Storage Technology
Servers

Grid
Remote Access
Backup / Restore

Misc
Hard Drives

Miscellaneous
Security
Development
Linux
VMWare

MainFrame OS
Unix
Apple
OS / 2
AS / 400

BeOS
Microsoft
VMS / OpenVMS

Database

Oracle
Miscellaneous
MySQL
Software
Sybase
Contact Management
PostgreSQL
Data Manipulation
Clarion
InterSystems Cache

Siebel
MUMPS
OLAP
SQLBase
SAS
GIS & GPS
4GL
Berkeley DB
DB2
Informix

Interbase / Firebird
FoxPro
Reporting
LDAP
Filemaker Pro
MS SQL Server
dBase
MS Access

Security

Misc
Web Browsers
Software Firewalls
Operating Systems Security
File Sharing

Spy / Ad Blockers
Vulnerabilities
WebApplications
IDS
Anti-Virus

Encryption
Anti Spam
Email Clients
VPN
Chat / IM

Programming

Editors IDEs
Installation
Handhelds / PDAs
Multimedia Programming
System / Kernel

Algorithms
Game
Signal Processing
Project Management
Open Source

Database
Misc
Languages
Processor Platforms
Theory

Web Development

Scripting
Blogs
Web Servers
Software
Search Engines
Web Graphics
Images

Internet Marketing
Images and Photos
Components
Document Imaging
Web Languages/Standards
Illustration
WebApplications

Fonts
WebTrends / Stats
Authoring
Digital Camera Software
Miscellaneous

Networking

Protocols
Apple Networking
Network Management
Message Queue
Application Servers
Content Management
File Servers
Email Servers
Misc
Java Editors & IDEs

Wireless
Networking Hardware
Backup / Restore
System Utilities
ISPs & Hosting
Web Servers
Storage Technology
Removable Backup Media
Servers
Broadband

Grid
OS / 2
Novell Netware
Unix Networking
Windows Networking
Security
Telecommunications
Operating Systems
Linux Networking

Other

Community Advisor
Lounge
Community Support
New Net Users

Philosophy / Religion
Math / Science
Miscellaneous
URLs

Expert Lounge
Politics
Puzzles / Riddles

Community Support

Suggestions
New to EE
New Topics
Community Advisor

CleanUp
Announcements
General

Feedback
Input
EE Bugs

09.06.2007 at 07:30AM PDT, ID: 19840351

Rank: Wizard

TName:

Hi, this works for me in FF and IE6:
http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_21329028.html
See also
http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_20282205.html

09.06.2007 at 07:49AM PDT, ID: 19840539

Rank: Master

OMC2000:

actually the version, which automatically sets event handler onkeydown for all form elements does not work for FF, but if this handler set in HTML code it works fine

09.06.2007 at 09:43AM PDT, ID: 19841675

bogorman:

Hi,
Thanks, both of you.
Have used:

function tabOnEnter (field, evt) {
var keyCode = document.layers ? evt.which : document.all ?
evt.keyCode : evt.keyCode;
if (keyCode != 13)
return true;
else {
getNextElement(field).focus();
return false;
}
}
function getNextElement (field) {
var form = field.form;
for (var e = 0; e < form.elements.length; e++)
if (field == form.elements[e])
break;
return form.elements[++e % form.elements.length];
}

The only thing that I would like to do is, when the enter key is pressed on the last control, that it redirects to the first. The first control HTML is:

<td colspan="8"></td>

I wrote this using CodeCharge Studio and the name is defined using a parameter, so I suppose I can't use "name". How can I write an onclick in the final tag to direct me to the first one?

Regards
Brian

09.06.2007 at 12:36PM PDT, ID: 19843099

Rank: Wizard

TName:

This should happen anyway with this code. The focus should change to the first field (field zero) after the last element of the form is reached.

That's the trick in this line:
return form.elements[++e % form.elements.length];
The returned element is the one that will get the focus.
First the current index is incremented (++e) then it is divided by the total number of elements - the remainder equals the incremented index itself (++e) every time, except when ++e has the same value as the total number of elements (the index of the last element+1 divided by the number of elements equals 1.0).
Then the remainder is 0 and the focus will move to the first element (form.elements[0])...

09.07.2007 at 07:01AM PDT, ID: 19847750

bogorman:

Hi,
Two points.
a) if I have comboboxes on the form. When the cursor reaches one and I click enter it does not progress to the next control. It does with the tab key.
b) have discovered that the reason why the cursor does not return to the first control when I click enter on the last is that there are hidden controls after it. The tab key goes on to select buttons, etc, following the last control and then goes off to other objects on the screen. I suppose this is inevitable, but it would be nice to have both the tab and the enter key just progressing through the controls on the form and at the end returning to the beginning, bypassing the buttons,etc.
Is there any way of correcting these effects?
Brian

09.07.2007 at 08:04AM PDT, ID: 19848297

Rank: Wizard

TName:

>if I have comboboxes on the form. When the cursor reaches one and I click enter it does not progress to the next control.

By comboboxes I suppose you mean select elements - if yes, then I can't confirm this - when a select box is focused and I click enter, the cursor/focus does move to the next control (tested in FF and IE6).

Concerning the hidden fields, see how this version of tabOnEnter () behaves for you. For me the hidden fields are not interfering anymore.
Please test this example as it is first...
The example has several hidden fields among the visible ones.
If you are still encountering problems, please also specify the browser(s) you are testing with.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
input.entryform {width:100px;}
table {border:1px solid #ddd; background-color:#f6f6f6; margin-bottom:4px;}
form {border:1px solid #333; width:540px; padding-bottom:4px;}
</style>
<script>
function tabOnEnter (field, evt) {
var keyCode = document.layers ? evt.which : document.all ?
evt.keyCode : evt.keyCode;
if (keyCode != 13)
return true;
else {
var el=getNextElement(field);
if (el.type!='hidden')
el.focus();
else
while (el.type=='hidden')
el=getNextElement(el);
el.focus();
return false;
}
}
function getNextElement (field) {
var form = field.form;
for (var e = 0; e < form.elements.length; e++) {
if (field == form.elements[e])
break;
}
return form.elements[++e % form.elements.length];
}
</script>
</head>

<form>
<table><tr><td>

</td><td>

</td><td>

</td>
</tr><tr>
<td>

</td><td>

</td><td>
<select onkeydown="return tabOnEnter (this, event);" >
<option>aaa</option>
<option>bbb</option>
<option>ccc</option>
</select>

</td></tr></table>
<input type="button" value="On the form" onClick="alert('I\'m on the form. I should get focus...');"
onkeydown="return tabOnEnter(this, event);" style="margin-left:2px;">

</form>

</body>
</html>

09.07.2007 at 08:13AM PDT, ID: 19848381

Rank: Wizard

TName:

>but it would be nice to have both the tab and the enter key just progressing through the controls on the form and at the end returning to the beginning...

Oh, missed this. Replace the tabOnEnter() function in the example abive with this one:

function tabOnEnter (field, evt) {
var keyCode = document.layers ? evt.which : document.all ?
evt.keyCode : evt.keyCode;
if (keyCode != 13 && keyCode !=9)
return true;
else {
var el=getNextElement(field);
if (el.type!='hidden')
el.focus();
else
while (el.type=='hidden')
el=getNextElement(el);
el.focus();
return false;
}
}

In fact I've only changed a line this time:
if (keyCode != 13)
has become
if (keyCode != 13 && keyCode !=9)

09.07.2007 at 10:49AM PDT, ID: 19849705

bogorman:

Hi,
Thank you very much for all the work you have done on this.
Your example works fine but the select tag still blocks the enter key on my webpage (though the tab key works).
The select coding on my page is:

<select class="entrylistbox" name="{fldFunding_Name}">
<option value="" selected>Select Value</option>
{fldFunding_Options}
</select>

it was written using CodeCharge studio, hence the parameter.
Can you suggest a solution?
Regards
Brian

09.07.2007 at 10:51AM PDT, ID: 19849723

bogorman:

By the way I am using Firefox and IE7. It's the same in both
Brian

09.07.2007 at 11:00AM PDT, ID: 19849775

Rank: Wizard

TName:

Did you add the onkeydown event handler in the real select code? None of the fields will behave as we want them to without it. Adding
onkeydown="return tabOnEnter(this, event);
your select works for ´me in IE6 and FF:

<select class="entrylistbox" name="{fldFunding_Name}" onkeydown="return tabOnEnter(this, event);">
<option value="" selected>Select Value</option>
{fldFunding_Options}
</select>

Accepted Solution

09.07.2007 at 11:07AM PDT, ID: 19849836

Rank: Wizard

TName:

>None of the fields will behave as we want them to without it...
Except the hidden input fields of course. They don't need the onkeydown.

09.07.2007 at 11:14AM PDT, ID: 19849888

bogorman:

Hi,
You were right. Stupidly, I did not add the onkeydown statement to the select controls!!
So sorry about that. Thanks so much for all your help. It works fine now
Have assigned the points.
Regards
Brian

09.07.2007 at 11:16AM PDT, ID: 19849904

Rank: Wizard

TName:

You're welcome
and thanks!

20080236-EE-VQP-29 / EE_QW_2_20070628