473,782 Members | 2,498 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Radio Button and focus

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
?
Dec 20 '05 #1
16 3670

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(radioO bj)
{
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.

Dec 20 '05 #2
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(som eOtherElement.f ocus)someOtherE lement.focus()"
... >
The UI sounds confusing and overly complicated.
--
Rob
Dec 20 '05 #3
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(radioO bj)
{
radioObj.blur() ;
}
Radio/HTMLInputElemen t 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(radioO bj)
{
if (radioObj && isMethodType(ty peof 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="focusO ff(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
Dec 20 '05 #4

"RobG" <rg***@iinet.ne t.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(som eOtherElement.f ocus)someOtherE lement.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!
Dec 20 '05 #5
Stuart wrote:
"RobG" <rg***@iinet.ne t.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(som eOtherElement.f ocus)someOtherE lement.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.docume ntElement;
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
Dec 20 '05 #6
Stuart wrote:
"RobG" <rg***@iinet.ne t.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&actio n=Search>
PointedEars
Dec 20 '05 #7

"RobG" <rg***@iinet.ne t.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.docume ntElement;
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.
Dec 20 '05 #8

"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!

Dec 20 '05 #9
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
Dec 20 '05 #10

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
1593
by: Matt | last post by:
The following code is try to validate if the user selects a radio button choice. I dont understand why document.UserInputs.question.value; gets undefined value even user make a choice. I tried text box and drop down list, and it works fine. <html> <head> <script type="text/javascript"> function CheckForm()
3
28288
by: Terry Murray | last post by:
Hi All: I would like to know how to set the focus on a radio button (if it is possible) I tried button.focus() but with no luck The reason that I need to do this is to validate a form. If the user does not select a radio button I would like my validation code to set the focus at the first radio button within the pair that was not selected that way
1
8765
by: Michael Albanese | last post by:
I am developing an application to handle my compay's OSHA reporting requirements. Some of the input criteria are technical and narowly defined, so I was trying to prvide what i call "Context Sensitive Help" by providing a short instructional message based on which control has Focus. Because of the way that a Radio Button List control is rendered in the browser i can not attach an onFocus event
2
3493
by: NishSF | last post by:
Would anyone have any suggestions/javascript code so that if one clicks the Radio Button "Yes" below he has the option of selecting any of the six CheckBox below. If the user clicks on Radio Button "No", he should not have the option of clicking on any of the six checkboxes. See Code attached. Thank you so much in advance for your help as I can't get to make this combo work. <p>Did you have any problems finding any of the information...
1
24749
by: s.chelliah | last post by:
Hi, I am trying to use javascript, div tag and radio button to disable/enable a text box. It works fine in netscape and firefox, but in IE, the text box is not disabled when the user checks the radio button. Note that I am using two div statements. Any other solutions also wellcome. <html>
0
2760
by: ballamber | last post by:
This is a solution to the problem. Works with .NET 2.0. So the problem is displaying a data bound read-only checkbox or radio button in a GridView without actually disabling those controls. I assume you know what templates are in a GridView. Examples are in VB.NET. Sorry... So as a first step create a function in the page's underlying class that returns the string "checked" based on the bound data. Here's what I did. The underlying data...
1
3358
by: FunkHouse9 | last post by:
I'm trying to develop an order page and in one section, the customer specifies a shipment type using radio buttons that is submitted to the shopping cart. There are 4 buttons. If either of the first two are selected, the form should submit the data. If either of the last two are selected, I want the form to require input on a text field to collect an account number (op40_LabelShip). I have gotten the form to require the field, but it...
3
2850
by: jahphill | last post by:
Hey. I thought id make a seperate discusion because the other became a bit lengthy and confusing. Aim: Create a php file which works with the script below, which makes the radiobuttons work =D Right, when say mp3 radio button is selected, and say BLA is typed in the text box. I would like it to open up...
1
2157
by: sososm | last post by:
Hy experts I need a little help here. Can anybody tell me how to select a radio button from another program knowing the name,id or text of the radio button. I want to automate internet explorer by checking the "First Name" radio button then pressing the "Send" button. This is the code I'm using to get the focus to internet explorer: using System;
0
9641
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
9480
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
10313
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
8968
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
7494
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
5378
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
5511
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
4044
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
3643
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.