Controlling tab order with JavaScript

Mark Reginald James

Hi,

I'm trying to use a keyboard event function to change what
element gets the focus after tab is pressed in a particular
element. Simple HTML that demonstrates the problem is below.

When tab is pressed in the second input box I want focus to move
to the first. It does this in IE, but not Mozilla 1.7.10. I
can make it work in Mozilla by changing the event from onkeydown
to onkeypress, but then it doesn't work in IE. Is there any
way to make this work generally without having to make the
inline event type dependent on the browser type?

Thanks.

<html>
<head>
<title>
Test Tabs
</title>
<script type="text/javascript">
function check_tab(e) {
if (e.keyCode == 9 ) {
document.getEle mentById('i1'). focus();
e.returnValue = false; // for IE
if (e.preventDefau lt) e.preventDefaul t(); // for Mozilla
}
}
</script>
</head>
<body>
<input type="text" id="i1"/>
<br/>
<input type="text" id="i2" onkeydown="chec k_tab(event)"/>
<br/>
<button type="button">B utton</button>
</body>
</html>

Sep 24 '05 #1

Subscribe Reply

26842

Randy Webb

Mark Reginald James said the following on 9/24/2005 2:28 PM:

Hi,

I'm trying to use a keyboard event function to change what
element gets the focus after tab is pressed in a particular
element. Simple HTML that demonstrates the problem is below.

Your problem is that you are trying to redefine the way the browser
works. That is going to confuse users because they expect the default
behavior and you are screwing with it.

If you want to change the tab order, set the tabindex.

<URL: http://www.w3.org/TR/REC-html40/inte...#adef-tabindex >

Problem solved.

--
Randy
comp.lang.javas cript FAQ - http://jibbering.com/faq & newsgroup weekly

Sep 24 '05 #2

Mark Reginald James

Randy Webb wrote:

Mark Reginald James said the following on 9/24/2005 2:28 PM:
Hi,

I'm trying to use a keyboard event function to change what
element gets the focus after tab is pressed in a particular
element. Simple HTML that demonstrates the problem is below.

Your problem is that you are trying to redefine the way the browser
works. That is going to confuse users because they expect the default
behavior and you are screwing with it.

If you want to change the tab order, set the tabindex.

<URL: http://www.w3.org/TR/REC-html40/inte...#adef-tabindex >

Problem solved.

Thanks Randy, but I don't think I can do that easily, if at all.

What I'm really doing is inserting a new text box when focus
is lost on the bottom text box of a set and the contents of
the box is non-blank. If focus is lost by clicking on
another element, then move the focus there. But if tab is
pressed, focus should move to the new box.

It would be quite complicated to dynamically set the tabindices,
and I'm not even sure whether browers will immediately take
into account the tabindex of the newly-created box.

The code I gave works, it's just browser-dependent. I don't
know why onkeydown and onkeypress have different tab-related
behaviour in Mozilla.

Sep 24 '05 #3

Mark Reginald James

I've somehow got this auto-form-extension code
working without the need for either blocking
the tab action plus using focus(), or using tabIndex.

Not sure what I did, but now tab triggers the
onkeydown event, creating the new box, then
the tab behaviour is activating the new box.
I also have an onblur trigger that also creates
the new box unless the onkeydown event has already
created it.

The new box doesn't get the focus after a tab if you
create it in the original box's onchange event. You
have to use the original box's onkeydown/onblur combo.

Hope someone finds this helpful.

Sep 24 '05 #4

ASM

Mark Reginald James a écrit :

Hi,

I'm trying to use a keyboard event function to change what
element gets the focus after tab is pressed in a particular
element.

No need to catch key event ...
You can use html way
or if it is with only one specific input
and using javascript
because to prss tab make element loses focus
use simply : onblur

demo :

<html><head><ti tle>Test Tabs</title>
<style type="text/css">
input { background:#ffc ; width: 3em;margin: 0px 4px; }
input:focus { background: yellow }
b { color: red }
</style>
</head><body>
<hr>method 1 (html)<br />
input 2 : <input type="text" id="i_a1" tabIndex=2 />
<b>input 1 : </b><input type="text" id="i_a2" tabIndex=1 />
input 3 : <input type="text" id="i_a2" tabIndex=3 />
<button type="button">B utton</button>
<hr>method 2 (javascript)<br />
input 2 : <input type="text" id="i_b1"
onblur="with(do cument.getEleme ntById('i_b3')) {focus();select ();}" />
<b>input 1 : </b><input type="text" id="i_b2"
onblur="with(do cument.getEleme ntById('i_b1')) {focus();select ();}" />
input 3 : <input type="text" id="i_b3" />
<button type="button">B utton</button>
<hr>method 3 (function javascript)<br />
<script type="text/javascript">
function jump(field) {
with(document.g etElementById(f ield))
{
focus();
select();
}
}
</script>
input 2 : <input type="text" id="i_c1" onblur="jump('i _c3');" />
<b>input 1 : </b><input type="text" id="i_c2" onblur="jump('i _c1');" />
input 3 : <input type="text" id="i_c3" />
<button type="button">B utton</button>
<hr></body>
</html>

--
Stephane Moriaux et son [moins] vieux Mac

Sep 24 '05 #5

ASM

Mark Reginald James a écrit :

I've somehow got this auto-form-extension code
working without the need for either blocking
the tab action plus using focus(), or using tabIndex.

Not sure what I did, but now tab triggers the
onkeydown event, creating the new box,
Now we have creation of a new text-field on the fly ?
then
the tab behaviour is activating the new box.
I also have an onblur trigger that also creates
the new box unless the onkeydown event has already
created it.
do not undertsand ... onblur without keydown
how make you that working ?
The new box doesn't get the focus after a tab if you
create it in the original box's onchange event. You
have to use the original box's onkeydown/onblur combo.
onblur would have to be enough ... no?
Hope someone finds this helpful.

--
Stephane Moriaux et son [moins] vieux Mac

Sep 24 '05 #6

Mark Reginald James

ASM wrote:

Now we have creation of a new text-field on the fly ?
Yes, for my original post I tried to boil the problem
down to the simplest code that demonstrated the problem,
but it turns out easier to automatically move to a newly
created box rather than to a specific existing box.

then
the tab behaviour is activating the new box.
I also have an onblur trigger that also creates
the new box unless the onkeydown event has already
created it.

do not undertsand ... onblur without keydown
how make you that working ?

Sorry ASM, I also do not understand what you are saying.

The idea is to allow a user to create a list of
text boxes which may represent something like a list
of responses to a question. Initially there is only
one text box. But as soon as the user leaves that
box with non-blank content, a new box in the list
is automatically created. If they leave the box by
clicking elsewhere, the new box is created, but focus
is now where they clicked. But if they leave the box
by pressing tab, I not only wanted the new box created,
but also that focus move to the new box. In this way
the user can create a list of options of any length
just by typing them and tabbing to a new one.

The new box doesn't get the focus after a tab if you
create it in the original box's onchange event. You
have to use the original box's onkeydown/onblur combo.

onblur would have to be enough ... no?

I don't think I'd properly tried onblur on its own,
but tried just now and found it didn't work. Tab
takes you to the box that was originally next in
sequence, skipping the new box.

I can post the code if anyone would like to see it.

Sep 25 '05 #7

Mark Reginald James

ASM wrote:

Mark Reginald James a écrit :
Hi,

I'm trying to use a keyboard event function to change what
element gets the focus after tab is pressed in a particular
element.

No need to catch key event ...
You can use html way
or if it is with only one specific input
and using javascript
because to prss tab make element loses focus
use simply : onblur

demo :

<html><head><ti tle>Test Tabs</title>
<style type="text/css">
input { background:#ffc ; width: 3em;margin: 0px 4px; }
input:focus { background: yellow }
b { color: red }
</style>
</head><body>
<hr>method 1 (html)<br />
input 2 : <input type="text" id="i_a1" tabIndex=2 />
<b>input 1 : </b><input type="text" id="i_a2" tabIndex=1 />
input 3 : <input type="text" id="i_a2" tabIndex=3 />
<button type="button">B utton</button>
<hr>method 2 (javascript)<br />
input 2 : <input type="text" id="i_b1"
onblur="with(do cument.getEleme ntById('i_b3')) {focus();select ();}" />
<b>input 1 : </b><input type="text" id="i_b2"
onblur="with(do cument.getEleme ntById('i_b1')) {focus();select ();}" />
input 3 : <input type="text" id="i_b3" />
<button type="button">B utton</button>
<hr>method 3 (function javascript)<br />
<script type="text/javascript">
function jump(field) {
with(document.g etElementById(f ield))
{
focus();
select();
}
}
</script>
input 2 : <input type="text" id="i_c1" onblur="jump('i _c3');" />
<b>input 1 : </b><input type="text" id="i_c2" onblur="jump('i _c1');" />
input 3 : <input type="text" id="i_c3" />
<button type="button">B utton</button>
<hr></body>
</html>

Thanks Stephane. Your code using onblur alone works for the
problem as originally posted. It unfortunately doesn't work
when you want to tab to a new box created by the onblur event
itself. The onkeydown/onblur combo is needed for this.

I'll keep your solution in mind if I ever want to dynamically
change the tab order of an existing set of boxes. Thanks again
for taking a look at my problem.

Sep 25 '05 #8

ASM

Mark Reginald James a écrit :

Thanks Stephane. Your code using onblur alone works for the
problem as originally posted. It unfortunately doesn't work
when you want to tab to a new box created by the onblur event
itself. The onkeydown/onblur combo is needed for this.

if it is not too late :

absolutly not !

<html>
<script type="text/javascript">
var ind= 0;
function jump(field) {
if(document.get ElementById(fie ld))
with(document.g etElementById(f ield))
{
focus();
select();
}
else {
ind++;
var I = document.create Element('INPUT' );
I.id = 'i_n'+ind;
I.size = 5;
I.onblur = function() { jump('new'); }
document.forms[0].appendChild(I) ;
jump('i_n'+ind) ;
}
}
</script>

<form>
<p>input 2 : <input type="text" id="i_c1" onblur="jump('i _c3');" />
<b>first input : </b><input type="text" id="i_c2" onblur="jump('i _c1');" />
<u>last input :</u> <input type="text" id="i_c3" onblur(jump('ne w'); />
<button type="button">B utton</button>
</form>

<style type="text/css">
input { background:#ffc ; width: 3em;margin: 0px 4px; }
input:focus { background: yellow }
b { color: red }
u { color: blue }
</style>
</html>
--
Stephane Moriaux et son [moins] vieux Mac

Sep 26 '05 #9

Mark Reginald James

ASM wrote:

if it is not too late :
No, thanks Stephane for having another look.
absolutly not !
...
<u>last input :</u> <input type="text" id="i_c3" onblur(jump('ne w'); />
...

I fixed the typo for onblur on this line and tried it out. It worked
in IE, but in Mozilla 1.7.10 the new box was created but focus moved
to the browser window address box rather than to the new box. I
don't know if this is a Mozilla bug, for which you have to use the
onkeydown/onblur method as a work-around.

Sep 27 '05 #10

Similar topics

1436

workking on controlling HTML froms with javascript

by: Mainard | last post by:

Hi, all First off I know alittle about javascript, but i have never worked with controlling froms with it be for i wonder can some help me? for example:I have this <textarea name"write1">Write Your Message:</textarea> on a form called myform2, and i have another form and textarea on another page. how am i to send the text from one from to the other form?

Javascript

3641

Controlling the order of serialized elements

by: Mark C. Neustadt | last post by:

Okay, okay... from what I can find, I'm gonna be out of luck. I also understand that it *shouldn't* matter but it does. I'm trying to send some XML to Amazon and they're requiring the nodes to be in a specific order. I am supposed to send the elements in the following order:AmazonOrderID, MerchantOrderID, StatusCode and then a collection of Item elements. When I serialize my object, the XML is putting the StatusCode element after the...

.NET Framework

2457

Validation Summary controlling the order of messages

by: Chris Rumsey via .NET 247 | last post by:

I want to be able to control the order error messages appear in the validation summary. They always seem to appear in reverse order ie not in the same order that the validation controls appear on the page. -------------------------------- From: Chris Rumsey ----------------------- Posted by a user from .NET 247 (http://www.dotnet247.com/) <Id>sOQiQ84IxU2dNojk+tctUw==</Id>

ASP.NET

1164

controlling media player component from c#

by: Rob Vermeulen | last post by:

Hi folks, Please forgive my ignorance but I need to know if it is possible to control ActiveX components on my website from within my serverside C# code. I'm quite an experienced s/w developer on a win32 base but I'm very new at ASP stuff. I've just created "MyFirstASP.NETWebpage" with a custom MediaPlayer control from Steve Orr on it. Works fine. It is only that on some of my previous projects I instantiated the WMP

ASP.NET

1220

selection controlling

by: Robert | last post by:

I haven't found anything at google sa i post here, hoping someone will help me I have written sth like this: document.form.inputfield.value += 'aaa' document.form.inputfield.focus() these 2 lines activate after a certain button is pressed, and they intend to add some text to a certain form field, and then focus on that field, so that

Javascript

896

More on controlling page flow...

by: Coleen | last post by:

I guess I didn't make my problem clear enough, or maybe there is no better way to do this... I have an ASP.Net (1.0 at the moment but we are upgrading to 2.0 using VB.net as the codebehind) web application that has about 40 pages. We use a User control to get info about the user account that is selected on login. The users have a specific order in which the pages need to flow depending on what selection is made from the directory. ...

ASP.NET

2718

XMLSerializer - Controlling the Order of Fields Serialized

by: Phil Galey | last post by:

I'm using XMLSerializer in VB.NET to serialize class-based objects to XML. It's serializing fine, except that I don't seem to have control over the order in which the various fields (properties) of an object are serialized. If I change the order in which properties are defined in the object, it has no affect on the order in which there are serialized into the XML file. Is there a way of controlling the order in which object properties are...

.NET Framework

13492

controlling Windows Media Player

by: Herb | last post by:

I've found how to use javascript to embed a Windows Media Player in a web page. How do I go about controlling the player in response to user input? There should be calls to start, stop and also to play at a certain position. For instance, I'd like to have a video playing. Along with that, I'd present a list of 10 chapters within the video. When a user clicks a link, the player should play the appropriate chapter or section. Thanks.

Javascript

1634

Controlling Page Stack Using IE6

by: trbjr | last post by:

My client-side application works reliably and as intended in Firefox, but not in IE6. The problem seems to be that I do not have control over the page stack in IE, while I do in Firefox. So far I have not figured out how to use “focus” to assure proper page sequencing. Here is an overview of my client-side application. There are 6 screens that capture user-entered data. Screen 1 opens 2, which opens 3, which opens 4, which opens 5, which...

Javascript

8392

What is ONU?

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...

General

8305

Changing the language in Windows 10

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,...

Windows Server

8825

Problem With Comparison Operator <=> in G++

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...

C / C++

8503

The easy way to turn off automatic updates for Windows 10/11

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,...

Windows Server

8605

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...

General

7324

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...

Career Advice

5632

Couldn’t get equations in html when convert word .docx file to html file in C#.

by: conductexam | last post by:

I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...

C# / C Sharp

4302

Windows Forms - .Net 8.0

by: adsilva | last post by:

A Windows Forms form does not have the event Unload, like VB6. What one acts like?

Visual Basic .NET

1953

How to add payments to a PHP MySQL app.

by: muto222 | last post by:

How can i add a mobile payment intergratation into php mysql website.

PHP