当隐藏输入类型的收音机并显示标签时，如何使用单选按钮之间的箭头键导航？ [英] How to navigate with arrow keys between radio buttons when input type radio is hidden and label is shown?

问题描述

我有一个单选按钮组，并且在显示相关标签时隐藏了单选按钮。让我们说
，单选按钮组称为颜色。选择某种颜色后，我会用该颜色突出显示标签。单击标签时，这非常有用。但我还想使用箭头键在标签之间导航。我意识到由于输入被隐藏，箭头移动没有生效。但有什么方法可以解决这个问题吗？

I have a radio button group and the radio buttons are hidden while the associated label is shown. Let's say that the radio button group is called color. When a certain color is chosen, I highlight the label with that color. This works great when all I click the labels. But I would also like to navigate between the labels using arrow keys. I realize that since the input is hidden, the arrow movements are not taking effect. But is there any way to get around this?

HTML：

<div>
    <input type="radio" name="color" value="blue" id="blue"><label for="blue">Blue</label><br>
    <input type="radio" name="color" value="red" id="red"><label for="red">Red</label><br>
    <input type="radio" name="color" value="green" id="green"><label for="green">Green</label><br>
    <input type="hidden" value="" id="color_selected"/>
</div>

CSS：

input {
    display: none;
}

JS：

$(document).ready(function() {
    $('input[name="color"]').change(function() {
        var prevColor = $('#color_selected').val();
        if (prevColor) {
            $('#' + prevColor).next('label').css({'background':'#FFFFFF'});
        }
        var color = jQuery(this).val();
        $(this).next('label').css({'background':color});
        $('#color_selected').val(color);
    });
});

http://jsfiddle.net/nkqLj/

感谢您的时间。

推荐答案

而不是 display：none ，通过将输入字段定位关闭来模拟隐藏。

Instead of display:none, mock the hiding by positioning the input field way off.

input {
    left: -1000px;
    position: absolute;
}

JSFIDDLE DEMO

这篇关于当隐藏输入类型的收音机并显示标签时，如何使用单选按钮之间的箭头键导航？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！