css - 使切换行为像输入控件，即响应空格键按下和键盘选项卡操作

Question

我们有如下链接中的切换控件 https://www.w3schools.com/howto/howto_css_switch.asp 虽然它们在鼠标单击时接受输入，但它们不会在按下空格键时改变状态，并且在使用键盘选项卡时它们不会突出显示/选中。

如何使这些行为像任何常规输入控件一样？

我会在 html/css 中寻找可以轻松应用于任何此类控件的解决方案。

更新: 如答案中所述，复选框会在按下空格键时更改状态，而不是输入键。

Answer 1

我找到了答案。首先给元素添加一个tab索引，这样就可以聚焦了。然后您可以添加此 jQuery 代码。

$('.switch').on('keydown', function(e) {
    if(e.keyCode == 13) {
        if($(this).children("input").attr('checked')) {
            $(this).children("input").attr('checked', false);
        } else {
            $(this).children("input").attr('checked', true);
        }
    }
});

我编辑了代码 W3Schools 站点以添加此代码。您可以在https://www.w3schools.com/code/tryit.asp?filename=FHPJRINMFQOH查看.

祝你好运!!希望这有帮助!!