Prev: passing arrays between scripts
Next: Math.random() and Math.round(Math.random()) and Math.floor(Math.random()*2)
From: Mel Smith on 30 Apr 2010 12:34
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


--
Mel Smith


From: nick on 30 Apr 2010 16:54
On Apr 30, 12:34 pm, "Mel Smith" <med_cutout_syn...(a)aol.com> wrote:

>     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
From: Mel Smith on 30 Apr 2010 17:59
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


From: VK on 1 May 2010 02:46
On Apr 30, 8:34 pm, "Mel Smith" <med_cutout_syn...(a)aol.com> wrote:
> *****************************************
> <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();
}
From: Ry Nohryb on 1 May 2010 05:40
On Apr 30, 10:54 pm, nick <nick...(a)fastmail.fm> wrote:
> On Apr 30, 12:34 pm, "Mel Smith" <med_cutout_syn...(a)aol.com> wrote:
>
> >     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.
--
Jorge.
 |  Next  |  Last
Pages: 1 2 3
Prev: passing arrays between scripts
Next: Math.random() and Math.round(Math.random()) and Math.floor(Math.random()*2)