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]

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]

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)someOtherElement.focus()"
... >


The UI sounds confusing and overly complicated.

 

[Thomas 'PointedEars' Lahn]

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]

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

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)someOtherElement.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]

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.

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.

What exactly is "UI"

User interface.

 

[Thomas 'PointedEars' Lahn]

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]

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 :-(

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?

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]

"Thomas 'PointedEars' Lahn"

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]

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]

"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:[email protected]]
| You can use the blur method.

,-[news:[email protected]]
| > 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:

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>

 

[Stuart]

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]

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]

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

If you just learned to read and understand ...


PointedEars

 

[Randy Webb]

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

Stuart wrote:




If you just learned to read and understand ...

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