Prev: passing arrays between scripts
Next: Math.random() and Math.round(Math.random()) and Math.floor(Math.random()*2)
From: Mel Smith on 1 May 2010 11:15

Jorge said:

Ry Nohryb" <jorge(a)jorgechamorro.com> wrote in message
news:e6ef08da-a4aa-44f9-9e9e-d4aa355161dc(a)y36g2000yqm.googlegroups.com...
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


From: Mel Smith on 1 May 2010 11:20
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


From: VK on 1 May 2010 11:51
On May 1, 7:20 pm, "Mel Smith" <med_cutout_syn...(a)aol.com> wrote:
> 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.

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>
</html>


> 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.
From: VK on 1 May 2010 12:13
On May 1, 7:51 pm, VK <schools_r...(a)yahoo.com> wrote:
> On May 1, 7:20 pm, "Mel Smith" <med_cutout_syn...(a)aol.com> wrote:
>
>
>
> > 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.
>
> 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>

From: David Mark on 1 May 2010 17:51
Mel Smith wrote:
> Jorge said:
>
> Ry Nohryb" <jorge(a)jorgechamorro.com> wrote in message
> news:e6ef08da-a4aa-44f9-9e9e-d4aa355161dc(a)y36g2000yqm.googlegroups.com...
> 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. ;)
First  |  Prev  |  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)