单选按钮和焦点 [英] Radio Button and focus

查看:90
本文介绍了单选按钮和焦点的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个页面,我利用左右光标键更改

图像,此页面上还有一组单选按钮,不幸的是当一个

单击单选按钮光标键的焦点转到收音机

按钮和任何后续光标键按下滚动收音机

按钮。


如何在点击单选按钮后将焦点从单选按钮上移开


解决方案



Stuart写道:

我有一个页面,我利用左右光标键来改变一个
图像,在这个页面上也是一组收音机按钮,不幸的是当点击
单选按钮时,光标键的焦点转到收音机
按钮,任何后续的光标键都会按下滚动收音机
按钮。

如何在点击单选按钮后将焦点从单选按钮上移开



您可以使用模糊方法。例如:


js:


function focusOff(radioObj)

{

radioObj.blur();

}


html:


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


注意:如果你有一组单选按钮,那么你必须设置

甚至是每个人的处理程序。你可以看到效率这么快就会有多快。


Stuart写道:

我有我利用左右光标键更改


的页面'左右光标键'是什么?你的意思是鼠标按钮?没有

每个人都有鼠标左键和右键。不是每个人都用

a鼠标导航,甚至还有鼠标。


如果脚本被禁用或不可用,用户是否可以更改图像?


图像,也在这个页面上是一组单选按钮,不幸的是当单击
单选按钮时,光标键的焦点转到收音机
按钮和任何后续光标键按下滚动收音机
按钮。


似乎你的UI逻辑存在缺陷。


如何在点击单选按钮后将焦点移开




当您检测到''光标

键'时,大概有其他元素有焦点。通过在每个单选按钮上放置一个onclick事件,每当单击一个单选按钮时,将该元素设置为焦点:


< input type =" radio" ;

onclick =" if(someOtherElement.focus)someOtherElemen t.focus()"

...>

UI听起来令人困惑,过于复杂。

-

Rob


web.dev写道:
< blockquote class =post_quotes> Stuart写道:

我有一个页面,我利用左右光标键来改变一个
图像,此页面上还有一组单选按钮,不幸的是,当点击一个单选按钮时,光标键的焦点转到收音机
按钮,任何后续的光标键都会按下滚动收音机
按钮。
单击
后如何将焦点从单选按钮上移开?
您可以使用模糊方法。




但是你好你不应该,见下文。

例如:

js:

功能focusOff(radioObj)

radioObj.blur();
}


Radio / HTMLInputElement对象是宿主对象,所以你应该在调用它们之前测试它的方法



函数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
^

这是XHTML而不是HTML。 (在HTML中相当于




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


但只有少数用户代理正确支持HTML SHORTTAG。)


IE不支持XHTML(相反,它会呈现错误的错误-corrected

HTML,如果XHTML文档以text / html的形式提供),那么

中没有用到尝试用后者提供前者,而没有XHTML的优势

在这里HTML。使用有效的HTML 4.01代替:


< input type =" radio" ID = QUOT; radio0_1" onclick =" focusOff(this)"< label for =" radio0_1"> text< / label>


但是,在这里使用focusOff()不可避免地使表单无法用于具有客户端脚本支持但不想或不能使用的用户

br />
a指点设备。显然是坏事,可以避免。

注意:如果你有一组单选按钮,那么你必须为每个按钮设置
偶数处理程序。 [...]




不,你可以使用'click''事件

将要使用的父`fieldset''元素泡泡起来。

PointedEars


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
?

解决方案


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.


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


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


这篇关于单选按钮和焦点的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆