Emulating the <Tab> Key operation ?

[Mel Smith]

Hi:

(JavaScript newbie warning)

I would like to emulate the operation of the <tab> key (with JS code)
when moving from one input text field to another. I am testing using IE7,
FireFox and Chrome.

Assume that the set of input text fields are as follows (and are filled
to the maximum length):

*****************************************
<input type="text" id="input1" maxlength="6" size="7" value="input1" />
<br />
<input type="text" id="input2" maxlength="6" size="7" value="input2" />
<br />
<input type="text" id="input3" maxlength="6" size="7" value="input3" />
*****************************************

During my testing I note that the <tab> key operates as follows:

1. The 'focus' moves to the next field.
2. The color and background of the newly focused input field change
to some 'default' (which I can't exactly I can't exactly determine).
3. The input cursor settles (with IE) *before* the first character,
and with fireFox *after* the last character.
4. When the user inputs a character into the already-filled field,
the field immediately clears to empty, and the user can input what he
wishes.

I *like* this operation and would like to emulate it in JavaScript !

However, in JS, when I use the onload="...." clause to set focus on an
input field (or even 'click' on an input field), I do not get the same
operation as tabbing to the field. Instead, I get:

1. The input cursor is placed at the start of input (with IE), and at
the end of the input text with FF), and wherever I place it when 'clicking'
it
2. If the user inputs a character into this 'full' field, it is
rejected -- i.e., nothing is entered, and nothing happens.

So, how can I emulate the operation of the <tab> key with JS please.

Thank you !

-Mel Smith

 

[nick]

    During my testing I note that the <tab> key operates as follows:
[...]
    I *like* this operation and would like to emulate it  in JavaScript !

It sounds like the tab key already does what you want. Why do you need
to emulate it?

Anyway what it sounds like you want specifically is to modify the
selected text after focusing a text input so that all of the text is
selected and will be replaced if new characters are typed, right? You
should probably read up on selection events and the Range object.

http://www.quirksmode.org/dom/range_intro.html

https://developer.mozilla.org/en/DOM/selection

http://msdn.microsoft.com/en-us/library/ms535872(VS.85).aspx

 

[Mel Smith]

Nick said:
It sounds like the tab key already does what you want. Why do you need
to emulate it?

Anyway what it sounds like you want specifically is to modify the
selected text after focusing a text input so that all of the text is
selected and will be replaced if new characters are typed, right?

Right !

You should probably read up on selection events and the Range object.

http://www.quirksmode.org/dom/range_intro.html

https://developer.mozilla.org/en/DOM/selection

http://msdn.microsoft.com/en-us/library/ms535872(VS.85).aspx

Nick:

I need my 'focus' code to act like the <tab> key, but as I noted in my
first post, it does not. Most importantly, it does not allow input into an
already-filled text input field. *But*, using the <tab> key, it does !
Also, there is the matter of duplicating the color/background color of a JS
focused field to match the color of a 'tabbed-to' field. But that is
secondary.

I'll peruse and study those links above.

Thanks for the response.

-Mel Smith

 

[VK]

*****************************************
<input type="text" id="input1" maxlength="6" size="7" value="input1" />
<br />
<input type="text" id="input2" maxlength="6" size="7" value="input2" />
<br />
<input type="text" id="input3" maxlength="6" size="7" value="input3" />
*****************************************

    During my testing I note that the <tab> key operates as follows:

    1.    The 'focus' moves to the next field.
    2.    The color and background of the newly focused input field change
to some 'default' (which I can't exactly I can't exactly determine).
    3.    The input cursor settles (with IE) *before* the first character,
and with fireFox *after* the last character.
    4.     When the user inputs a character into the already-filled field,
the field immediately clears to empty, and the user can input what he
wishes.

The behavior you described is neither correct by design nor exposed by
the prominent browsers unless some deeply buggy versions. "Add to" and
"replace with" actions are very different and respectively visually
differ in any normal environment. In "add to" mode there is a blinking
cursor at the position where the input will be added. In "replace
with" mode the whole content is highlighted by isSelected sytem style
(light-blue highlight mostly as the conventional isSelected sytem
style).
By navigating with Tab presses the next text form field goes into
"replace with" mode with all content being selected and highlighted.
To emulate this programmatically on page load simply do:

window.onload = function() {
// other pre-display page manipulations
document.forms['MyForm'].elements['TextField'].focus();
document.forms['MyForm'].elements['TextField'].select();
}

 

[Ry Nohryb]

    During my testing I note that the <tab> key operates as follows:
    [...]
    I *like* this operation and would like to emulate it  in JavaScript !

It sounds like the tab key already does what you want. Why do you need
to emulate it?

Anyway what it sounds like you want specifically is to modify the
selected text after focusing a text input so that all of the text is
selected and will be replaced if new characters are typed, right? You
should probably read up on selection events and the Range object.

http://www.quirksmode.org/dom/range_intro.html

https://developer.mozilla.org/en/DOM/selection

http://msdn.microsoft.com/en-us/library/ms535872(VS.85).aspx

He could focus the input before the one he wants to focus, and post a
tab key event. That might work, I think.

 

[Mel Smith]

Jorge said:

He could focus the input before the one he wants to focus, and post a
tab key event. That might work, I think.

Seems like a good idea ! But how does one 'post a tab key event'.

btw, I have David Flanagan's 5th edition and it is 'moth-eared' because
of my reading/testing over the past six months. His Chapter 17 on event
handling is very detailed, helpful and contains good examples. I would
suppose something on 'synthetic event creation' would be appropriate ??

Thanks for the suggestion. now I'd like to try to implement it

-Mel Smith

 

[Mel Smith]

VK said:

During my testing I note that the <tab> key operates as follows:

1. The 'focus' moves to the next field.
2. The color and background of the newly focused input field change
to some 'default' (which I can't exactly I can't exactly determine).
3. The input cursor settles (with IE) *before* the first character,
and with fireFox *after* the last character.
4. When the user inputs a character into the already-filled field,
the field immediately clears to empty, and the user can input what he
wishes.

The behavior you described is neither correct by design nor exposed by
the prominent browsers unless some deeply buggy versions.

Certainly, my IE7 and recent Firefox versions exhibit that behaviour.


"Add to" and
"replace with" actions are very different and respectively visually
differ in any normal environment. In "add to" mode there is a blinking
cursor at the position where the input will be added. In "replace
with" mode the whole content is highlighted by isSelected sytem style
(light-blue highlight mostly as the conventional isSelected sytem
style).
By navigating with Tab presses the next text form field goes into
"replace with" mode with all content being selected and highlighted.
To emulate this programmatically on page load simply do:

window.onload = function() {
// other pre-display page manipulations
document.forms['MyForm'].elements['TextField'].focus();
document.forms['MyForm'].elements['TextField'].select();
}


VK:

Thank you. I'll try the '.select()' method this weekend !

-Mel Smith

 

[VK]

VK said:



The behavior you described is neither correct by design nor exposed by
the prominent browsers unless some deeply buggy versions.

    Certainly, my IE7 and recent Firefox versions exhibit that behaviour.

Most certainly they don't. Your observation was either a TGIF effect
when all thoughts are about the week-end or another script
interfering with the default behavior. Try this clean sample to see
the right behavior (press Tab several times):

<!DOCTYPE html>
<html>
<head>
<title>Tab Test</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<script type="text/javascript"></script>
</head>
<body>
<form action="" onsubmit="return false;">
<fieldset>
<input type="text" name="textfield1" value="aaa">
<input type="text" name="textfield2" value="bbb">
<input type="text" name="textfield3" value="ccc">
<input type="text" name="textfield4" value="ddd">
</fieldset>
</form>
</body>

window.onload = function() {
 // other pre-display page manipulations
 document.forms['MyForm'].elements['TextField'].focus();
 document.forms['MyForm'].elements['TextField'].select();

}

VK:

    Thank you. I'll try the '.select()' method this weekend !

Nothing really to try here, this is how it is being done since 1995.
You are welcome.

 

[VK]

Most certainly they don't. Your observation was either a TGIF effect
when all thoughts are about the week-end or another script
interfering with the default behavior.

What you might be observing is the difference in the *scripted" Tab
navigation behavior when someone is trying right the opposite to the
default: on input getting focus put it into "add to" mode so clearing
selection and placing cursor at the end of the current content. Here
if the ancient clear/set trick is used Fx demonstrate the historical
behavior and IE is plain buggy. Here you need a range scripting
instead:

<!DOCTYPE html>
<html>
<head>
<title>Tab Test</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function setAddToMode(elm) {
var tmp = elm.value;
elm.value = '';
elm.value = tmp;
return false;
}
</script>
</head>
<body>
<form action="" onsubmit="return false;">
<fieldset>
<input type="text" name="textfield1" value="aaa">
<input type="text" name="textfield2" value="bbb"
onfocus="return setAddToMode(this);">
<input type="text" name="textfield3" value="ccc">
<input type="text" name="textfield4" value="ddd"
onfocus="return setAddToMode(this);">
</fieldset>
</form>
</body>
</html>

 

[David Mark]

Jorge said:

He could focus the input before the one he wants to focus, and post a
tab key event. That might work, I think.

Seems like a good idea ! But how does one 'post a tab key event'.

It's not a good idea. Just use the focus and select methods on the
element you are interested in.

Also, it is a terrible idea to do this on load. Don't steal the focus
from the user. They may be typing in the address bar for all your
script knows.

 

[Mel Smith]

To All you folks who responded:

The select() method works perfectly and I will use it in the future.

Thanks to all !

-Mel Smith

 

[Mel Smith]

To VK:

Here is my simple test to illustrate what my difficulty was:

(the select() method resolved my problem. Thank you.

-Mel

******************** markup below **********************
<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
<title>Input <Tab> Key and 'Focus' Test</title>
</head>
<body onload="document.getElementById('input2').focus();">
<br />
To Demostrate: <br /><br />
1. Using the 'onload focus' clause, one cannot enter characters into the
'input2'<br />
field unless some characters are first removed, <b>BUT</b> <br /><br />
2. Using the Tab Key to move to an input field, one <b>CAN</b> enter
characters into<br />
an input field <b>without</b> first deleting character(s).<br /><br />
Would someone explain why this happens please ?

<br />
Thank you !
<br />
<br />

<input type="text" id="input1" maxlength="6" size="7" value="input1 " />
<br />
<input type="text" id="input2" maxlength="6" size="7" value="input2" />
<br />
<input type="text" id="input3" maxlength="6" size="7" value="input3" />
<br />

</body>
</html>