只使用纯CSS3实现键盘导航

Question

只使用纯CSS3实现键盘导航

4

有没有一种只使用 CSS3，而不需要 JS 或任何 JS 库就可以为链接添加键盘导航的方法？具体来说，我创建了一个纯 CSS3 的灯箱效果，并有一堆图片，但我想要使用左右箭头键在图片之间导航，而不必在屏幕上的任何地方点击，并使用 ESC 键来实现“取消”按钮的效果（类似于关闭）。

- Jayz

2

CSS 用于布局和样式，除了:hover等内容外，它没有事件，并且无法响应键盘输入。这是 JavaScript 的工作。 - Marc B

你目前是如何处理转换（从图像a到图像b）的？请展示给我们代码，这样我们可以帮助你创建一个可用的解决方案。它必须是JavaScript，但可以是纯JavaScript。 - sg3s

@MarcB 但是HTML可以！ http://jsfiddle.net/darkyen/NUtnX/ - ShrekOverflow

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ShrekOverflow · Accepted Answer

你所要求的在层叠样式表中是不可能实现的。你可以使用CSS来为时序制作动画或执行过渡等操作，但是你无法仅使用CSS实现你想要的内容！

原因如下：

1.层叠样式表是用于制作页面的视觉元素而不是用户体验的。

2.CSS没有与键盘交互的方法。

你可以添加一些JavaScript来实现这一点。但是由于你不想使用JavaScript，所以你被卡住了！

“复选框hack”

使用类似于复选框和单选按钮的东西是可行的，但是首先需要将焦点带到该区域，可以使用自动对焦属性来完成。

所以，这个小工具应该能解决你的问题。

http://jsfiddle.net/darkyen/NUtnX/

但是我想在开始之前警告您，任何“模糊”都会导致此操作失败。因此，更好的JavaScript代码变体如下所示

JavaScript代码

实现您想要的JavaScript代码将包含非常少量的JavaScript。假设您的标记是：

因此，您可以简单地分配一小段JavaScript代码。

(function(){
 var slide = 0,  // Current slide 
     max   = 10, // Maximum Number of slides
 ele = document.getElementById("show");
     document.addEventListener('keydown',function(e){
          e.preventDefault();
          e.stopPropagation(); // To stop more event stuff and default behaviour
          key = e.keyCode; // To find out what key is this 
          if( key === 39 ){
              // Right arrow 
              // Aha we incremented the value!
              slide++;
              slide %= (max+1);
              // Increase the value of slide by 1 and keep em in limits
          }else if( key === 37){
              slide = (--slide >= 0)?slide: ( slide + max );
              // Will decrement the slide value by 1 and if they are less then 0 then   will cycle it to the last slide 
          }  

          ele.className.replace(/slide[0-9]/gi,'slide'+slide);                 
          // wasn't hard now was it ?     
     });
 })();

以上最小的JavaScript代码可以完成更改幻灯片的任务，或者您可以随时查看impress.js的源代码。