Radio Button and focus

[Stuart]

I have a page where I utilise the left and right cursor keys to change an
image, also on this page is a groups of radio buttons, unfortunately when a
radio button is clicked the focus for the cursor keys goes to the radio
buttons and any subsequent cursor key presses scroll through the radio
buttons.

How do I take focus away from the radio buttons after they have been clicked
?

[web.dev]

Stuart wrote:

I have a page where I utilise the left and right cursor keys to change an
image, also on this page is a groups of radio buttons, unfortunately when a
radio button is clicked the focus for the cursor keys goes to the radio
buttons and any subsequent cursor key presses scroll through the radio
buttons.

How do I take focus away from the radio buttons after they have been clicked
?

You can use the blur method. For example:

js:

function focusOff(radioObj)
{
radioObj.blur();
}

html:

<input type = "radio" onclick = "focusOff(this)"/>text

Note: if you have a group of radio buttons, then you'll have to set the
even handler for each of them. You can see how quickly inefficient
this can become.

[RobG]

Stuart wrote:

I have a page where I utilise the left and right cursor keys to change an
What are 'left and right cursor keys'? Do you mean mouse buttons? Not
everyone has left and right mouse buttons. Not everyone navigates with
a mouse, or even has a mouse.

Can users change images if scripting is disabled or not available?

image, also on this page is a groups of radio buttons, unfortunately when a
radio button is clicked the focus for the cursor keys goes to the radio
buttons and any subsequent cursor key presses scroll through the radio
buttons.
Seems your UI logic is flawed.

How do I take focus away from the radio buttons after they have been clicked

Presumably some other element has focus when you detect the 'cursor
keys'. Set that element to have focus whenever a radio button is
clicked by putting an onclick event on each radio button:

<input type="radio"
onclick="if(someOtherElement.focus)someOtherElemen t.focus()"
... >
The UI sounds confusing and overly complicated.
--
Rob

[Thomas 'PointedEars' Lahn]

web.dev wrote:

Stuart wrote:

I have a page where I utilise the left and right cursor keys to change an
image, also on this page is a groups of radio buttons, unfortunately when
a radio button is clicked the focus for the cursor keys goes to the radio
buttons and any subsequent cursor key presses scroll through the radio
buttons.

How do I take focus away from the radio buttons after they have been
clicked ?
You can use the blur method.

But you should not, see below.
For example:

js:

function focusOff(radioObj)
{
radioObj.blur();
}
Radio/HTMLInputElement objects are host objects, so you should
test for its methods before you call them.

function isMethodType(s)
{
return (s == "function" || s == "object");
}

function focusOff(radioObj)
{
if (radioObj && isMethodType(typeof radioObj.blur))
{
radioObj.blur();
}
}
html:

<input type = "radio" onclick = "focusOff(this)"/>text ^
This is more XHTML than it is HTML. (In HTML that is equivalent
to

<input type = "radio" onclick = "focusOff(this)">&gt;text

but only few user agents support HTML SHORTTAG properly.)

And IE does not support XHTML (instead it renders falsely error-corrected
HTML if XHTML documents are served as text/html), so there is no use in
attempting to feed the former with the latter, and no advantage of XHTML
over HTML here whatsoever. Use Valid HTML 4.01 instead:

<input type="radio" id="radio0_1" onclick="focusOff(this)"<label for="radio0_1">text</label>
However, using focusOff() here inevitably makes the form unusable for users
that have client-side script support present but do not want or cannot use
a pointing device. Clearly a Bad Thing, and one that can be avoided.
Note: if you have a group of radio buttons, then you'll have to set the
even handler for each of them. [...]

No, you could use a parent `fieldset' element to which the `click' event
would bubble up.
PointedEars

[Stuart]

"RobG" <rg***@iinet.net.au> wrote in message
news:43***********************@per-qv1-newsreader-01.iinet.net.au...

Stuart wrote:

I have a page where I utilise the left and right cursor keys to change an
What are 'left and right cursor keys'? Do you mean mouse buttons? Not
everyone has left and right mouse buttons. Not everyone navigates with a
mouse, or even has a mouse.

Can users change images if scripting is disabled or not available?

No I mean the arrow keys on the key board, not sure what the correct name is
for these

I am the only user of this page so compatablity issues don't come into it

How do I take focus away from the radio buttons after they have been
clicked
Presumably some other element has focus when you detect the 'cursor keys'.
Set that element to have focus whenever a radio button is clicked by
putting an onclick event on each radio button:

<input type="radio"
onclick="if(someOtherElement.focus)someOtherElemen t.focus()"
... >

What actually has focus when a page is first loaded.?

Take a look at the page in question
http://www.stuartstuart.fsnet.co.uk/weather/handler.htm

The left and right arrows move the maps back and forward. however when a
radio button is clicked the arrow keys scrooll through the buttons until I
click somewhere else,

If I attach an event to the onClick of the radio button, what should I
attach focus to?

The UI sounds confusing and overly complicated.

What exactly is "UI" I am not a developer or a javaScripter, just simply
trying to get a page to work in the way I would like it to work!

[RobG]

Stuart wrote:

"RobG" <rg***@iinet.net.au> wrote in message
news:43***********************@per-qv1-newsreader-01.iinet.net.au...

Stuart wrote:

I have a page where I utilise the left and right cursor keys to change an
What are 'left and right cursor keys'? Do you mean mouse buttons? Not
everyone has left and right mouse buttons. Not everyone navigates with a
mouse, or even has a mouse.

Can users change images if scripting is disabled or not available?

No I mean the arrow keys on the key board, not sure what the correct name is
for these

Arrow keys will do me. In the good ol' days, they were used to move
the cursor on the screen hence 'cursor keys' I guess, but now I think
'arrow keys' will be more widely understood.


I am the only user of this page so compatablity issues don't come into it
Stuff posted here is assumed to be for the general web unless stated
otherwise.

How do I take focus away from the radio buttons after they have been
clicked
Presumably some other element has focus when you detect the 'cursor keys'.
Set that element to have focus whenever a radio button is clicked by
putting an onclick event on each radio button:

<input type="radio"
onclick="if(someOtherElement.focus)someOtherElemen t.focus()"
... >

What actually has focus when a page is first loaded.?

That likely depends on the browser and how you arrived at the page.


Take a look at the page in question
http://www.stuartstuart.fsnet.co.uk/weather/handler.htm
The page doesn't work at all. You have used a reserved word for your
very first variable name:

var int=24
All statements should be terminated by a semi-colon even though they
will be inserted automatically - don't leave it to chance.


The left and right arrows move the maps back and forward. however when a
radio button is clicked the arrow keys scrooll through the buttons until I
click somewhere else,
Using which browser? It works for me OK in IE 5.2 (Mac OS) but not
any other browser I tried.

If I attach an event to the onClick of the radio button, what should I
attach focus to?
Probably the document body since that is where the onkeydown is
defined, try:

function docFocus(){
var docBody = document.body || document.documentElement;
if (docBody && docBody.focus) docBody.focus();
}
But it 'works' for me in IE 5.2, so the point seems moot.

The UI sounds confusing and overly complicated.

What exactly is "UI"

User interface.

--
Rob

[Thomas 'PointedEars' Lahn]

Stuart wrote:

"RobG" <rg***@iinet.net.au> wrote [...]:

Stuart wrote:

I have a page where I utilise the left and right cursor keys to change
an

What are 'left and right cursor keys'? Do you mean mouse buttons? Not
everyone has left and right mouse buttons. Not everyone navigates with a
mouse, or even has a mouse.

Can users change images if scripting is disabled or not available?

No I mean the arrow keys on the key board, not sure what the correct name
is for these

I am the only user of this page so compatablity issues don't come into it

Well, you crippling your own keyboard navigation deliberately certainly
strikes me as being an issue ...

The UI sounds confusing and overly complicated.

What exactly is "UI" [...]

<http://foldoc.org/?query=UI&action=Search>
PointedEars

[Stuart]

"RobG" <rg***@iinet.net.auau> wrote in message

Arrow keys will do me. In the good ol' days, they were used to move the
cursor on the screen hence 'cursor keys' I guess, but now I think 'arrow
keys' will be more widely understood.

i'm showing my age :-(

Take a look at the page in question
http://www.stuartstuart.fsnet.co.uk/weather/handler.htm

The page doesn't work at all. You have used a reserved word for your very
first variable name:

var int=24

It has worked fine for me over the past few years, im on IE 5

however I have amended it to to intT

Where can i find a list of reserved words?

The left and right arrows move the maps back and forward. however when a
radio button is clicked the arrow keys scrooll through the buttons until
I click somewhere else,
Using which browser? It works for me OK in IE 5.2 (Mac OS) but not

function docFocus(){
var docBody = document.body || document.documentElement;
if (docBody && docBody.focus) docBody.focus();
}

Fitted this in and its all working how I want it to, many thanks....
Definatly being lazy now, How do I assign the up and down arrow keys to
scroll through the "grp" radio buttons.

[Stuart]

"Thomas 'PointedEars' Lahn"

Well, you crippling your own keyboard navigation deliberately certainly
strikes me as being an issue ...

What navigation is there to do on that page other than scroll through the
images? Personally I can,t think of a better way of viewing these images
than to use the cursor keys!

[Thomas 'PointedEars' Lahn]

Stuart wrote:

"Thomas 'PointedEars' Lahn"

Well, you crippling your own keyboard navigation deliberately certainly
strikes me as being an issue ...

What navigation is there to do on that page other than scroll through the
images? Personally I can,t think of a better way of viewing these images
than to use the cursor keys!

Read again. With blur() you are _preventing_ yourself from using the
cursor keys again (or require yourself to tab back). You are looking
for focus()ing another control onclick or for another UI approach.
PointedEars

[Stuart]

"Thomas 'PointedEars' Lahn" <Po*********@web.de> wrote in message
news:54****************@PointedEars.de...

Stuart wrote:

"Thomas 'PointedEars' Lahn"

Well, you crippling your own keyboard navigation deliberately certainly
strikes me as being an issue ...

What navigation is there to do on that page other than scroll through the
images? Personally I can,t think of a better way of viewing these images
than to use the cursor keys!

Read again. With blur() you are _preventing_ yourself from using the
cursor keys again (or require yourself to tab back). You are looking
for focus()ing another control onclick or for another UI approach.
PointedEars

I have never suggested blurring anything

[Thomas 'PointedEars' Lahn]

Stuart wrote:

"Thomas 'PointedEars' Lahn" <Po*********@web.de> wrote [...]

Stuart wrote:

"Thomas 'PointedEars' Lahn"
Well, you crippling your own keyboard navigation deliberately certainly
strikes me as being an issue ...
What navigation is there to do on that page other than scroll through
the images? Personally I can,t think of a better way of viewing these
images than to use the cursor keys!

Read again. With blur() you are _preventing_ yourself from using the
cursor keys again (or require yourself to tab back). You are looking
for focus()ing another control onclick or for another UI approach.
[...]

I have never suggested blurring anything

True, however

,-[news:11*********************@g44g2000cwa.googlegro ups.com]
| You can use the blur method.

,-[news:43***********************@per-qv1-newsreader-01.iinet.net.au]
| > How do I take focus away from the radio buttons after they have been
| > clicked ?
| Not everyone navigates with a mouse, or even has a mouse.

But, with the "page in question" you provided, the logical design
choice is indeed either to use the blur() method of the radio button
on click. I quick-tested that with

javascript:alert(document.getElementsByName("int")[0].onclick=function()
{ this.blur(); })
and
javascript:alert(document.getElementsByName("int")[1].onclick=function()
{ this.blur(); })

However, this way users (you) will have to tab-navigate back to the
radio button and can only do one change with the up/down keys.

So you might want to consider the alternative of providing Left/Right
buttons for navigation that gain focus after a selection, applying the
focus() method on the respective element object. The cursor keys can
still be used to trigger either button, so no functionality would be
lost or duplicated.

But please, stop abusing tables and start using forms properly; there
is the `fieldset' element which you can also use for handling the
bubbling `click' event. Valid markup would be an advantage, too.

<URL:http://validator.w3.org/>

And, last but not least, you might want to consider using an existing
sender address as you will receive no more help from me otherwise, not
considering that you are already running the risk of losing your account
anyway.

<URL:http://www.interhack.net/pubs/munging-harmful/>
<URL:http://www.cw.com/legal/acceptable_use_policy.html>
HTH

PointedEars

[Randy Webb]

Thomas 'PointedEars' Lahn said the following on 12/20/2005 7:24 PM:

Stuart wrote:
<snip>
And, last but not least, you might want to consider using an existing
sender address as you will receive no more help from me otherwise, not
considering that you are already running the risk of losing your account
anyway.

Someday, you might actually wake up to Reality and realize that your
empty threats at losing an account are as worthless as trying to pole
vault over the moon.

<snipped useless URL's>

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/

[Stuart]

"Stuart" <ff**@hhhde.khr> wrote in message

Fitted this in and its all working how I want it to, many thanks....
Definatly being lazy now, How do I assign the up and down arrow keys to
scroll through the "grp" radio buttons.

messed about, and got it to work in a fashion.

Have I went about disabling the scroll down with the down key in the correct
way! I got confused with this, its working (IE5) but not too sure how!

the image changes all work on the cursor keys!
remember this is only intended for my use, so I havnt tried for browser
compatability!

[Stuart]

"Thomas 'PointedEars' Lahn" <Po*********@web.de>

And, last but not least, you might want to consider using an existing
sender address as you will receive no more help from me otherwise
But you have not provided any help !!!!!

take a look at the posts by robG & web.dev, that is help, your post in
contrast are irritating pedantic drivel!

, not
considering that you are already running the risk of losing your account
anyway.

yawn

[Thomas 'PointedEars' Lahn]

Stuart wrote:

"Thomas 'PointedEars' Lahn" <Po*********@web.de>

And, last but not least, you might want to consider using an existing
sender address as you will receive no more help from me otherwise

But you have not provided any help !!!!!

If you just learned to read and understand ...
PointedEars
--
"And all those exclamation marks, you notice? Five? A sure sign of
someone who wears his underpants on his head."
-- Terry Pratchett in "Maskerade"

[Randy Webb]

Thomas 'PointedEars' Lahn said the following on 12/22/2005 8:52 AM:

Stuart wrote:

"Thomas 'PointedEars' Lahn" <Po*********@web.de>

And, last but not least, you might want to consider using an existing
sender address as you will receive no more help from me otherwise

But you have not provided any help !!!!!

If you just learned to read and understand ...

And if we could only get YOU to read and understand.....

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/