我有一个充满单选按钮的页面，我希望能够通过 Tab 键浏览，然后根据键盘输入选择选项。我希望让键盘输入在单选按钮上的工作方式类似于它在下拉菜单上的工作方式（键入字母“G”将自动选择以“G”开头的第一个选项）
是否有一个 jquery 插件可以帮助我解决这个问题，或者我必须从头开始整合这些功能。不幸的是，根据客户的要求，选项需要保持单选按钮（而不是下拉菜单）格式，并且内置的制表符/箭头键/空格键功能还不够。
谢谢
【问题讨论】：
标签： jquery jquery-plugins keyboard drop-down-menu radio-button
以下是一些您可能会使用的代码示例。根据需要添加您自己的 Case 部分，放入您的选择器以匹配您的结构。
一个通过了当前的选择，另一个没有。 随心所欲地使用，并根据您的需要而定。
/* handle special key press */
function checkKey(e)
{
var shouldBubble = true;
switch (e.keyCode)
{
// user pressed the Tab
case 9:
{
$(".pickMyClass").toggleClass("pickSelectVisible");
$("#someOtherClass").toggleClass('pickHighlight');
shouldBubble = false;
break;
};
// user pressed the Enter
case 13:
{
$(".pickMyClass").toggleClass("pickSelectVisible");
$('.pickEntryArea').trigger('change'); /* we made changes so trigger it */
$("#someOtherClass").toggleClass('pickHighlight');
break;
};
// user pressed the ESC
case 27:
{
$(".pickMyClass").toggleClass("pickSelectVisible");
$("#someOtherClass").toggleClass('pickHighlight');
break;
};
};
/* this propogates the jQuery event if true */
return shouldBubble;
};
/* handle special key press */
function checkFieldKey(e, me)
{
var shouldBubble = true;
switch (e.keyCode)
{
// user pressed the Enter
case 13:
{
$(me).blur();
$("#someSpecialSelect").focus();
shouldBubble = false;
break;
};
};
/* this propogates the jQuery event if true */
return shouldBubble;
};
/* user pressed special keys while in Select */
$(".someSelect").keydown(function(e)
{
return checkKey(e);
});
/* user pressed special keys while in Select */
$(".somethingOther").keydown(function(e)
{
return checkFieldKey(e, $(this));
});
【讨论】：
使用 HTML 而不是 jQuery，浏览器有一个内置的机制来选择键盘输入的表单选项 + 使用 'accesskey' 属性的修饰键。我很确定 jQuery 可以在必要时与此方法进行交互。
<p>To select with a keyboard, click "alt+a" or "alt+b"*</p>
<form name="myForm" method="post">
<input type="radio" accesskey="a" value="a" name="myRadio" /> Value A
<input type="radio" accesskey="b" value="b" name="myRadio" /> Value B
<input type="submit" name="submit" value="submit" />
</form>
*更多解释见：http://www.webaim.org/techniques/keyboard/accesskey.php
【讨论】：