简体   繁体   English

键盘快捷键可浏览网站

[英]Keyboard shortcut to navigate a website

I'm building a PHP application framework where all pages are created dynamically such as: 我正在建立一个PHP应用程序框架,其中所有页面都是动态创建的,例如:

  • domain.com/1/ domain.com/1/
  • domain.com/2/ domain.com/2/
  • domain.com/3/ domain.com/3/
  • etc... 等等...

Now I want to add a support so that users can simply use their keyboard to navigate through the site. 现在,我想添加一个支持,以便用户只需使用键盘即可浏览该站点。 (May be pressing and keyboard keys) (可能按键盘键)

Is that something doable? 那可行吗? If so, what do I need to use? 如果是这样,我需要使用什么?

You would definitely need to use JavaScript to capture all of the keydown (note, arrow keys will not fire keypress event) events. 你肯定会需要使用JavaScript来捕获所有的keydown(注意,箭头键将不触发按键事件)的事件。 For instance, Ctrl + 2 would go to the /2 page, Ctrl + 3 would go to the /3 page. 例如, Ctrl + 2将转到/ 2页, Ctrl + 3将转到/ 3页。

I think you'd need a way to map the keypress events to the actual page names. 我认为您需要一种将按键事件映射到实际页面名称的方法。 I'd suggest maintaining a layer of abstraction, such as a mapping file, between keydown event codes and the actual page names so that the keycodes could be customized in the future if needed. 我建议在按键事件代码和实际页面名称之间保留一个抽象层,例如映射文件,以便将来在需要时可以自定义按键代码。

Do a search on this event to get you started. 搜索此事件以开始使用。 The example below captures the enter key 下面的示例捕获回车键

   if(event.keyCode == 13) {
       // do stuff
   }

Here is the list of keycodes: http://www.cambiaresearch.com/c4/702b8cd1-e5b0-42e6-83ac-25f0306e3e25/Javascript-Char-Codes-Key-Codes.aspx 以下是键码列表: http : //www.cambiaresearch.com/c4/702b8cd1-e5b0-42e6-83ac-25f0306e3e25/Javascript-Char-Codes-Key-Codes.aspx

To create events for these keys, I would suggest starting out by creating events for them. 要为这些键创建事件,我建议首先为它们创建事件。 You will need jQuery for this example, although there are ways to accomplish the same in pure JavaScript: 尽管可以通过纯JavaScript实现相同的方法,但您需要使用jQuery作为此示例:

// bind keydown events to the window
$(document).keydown(function(event) {
    if (event.which == 37) {  
       // left arrow - run your code to change back a page
       alert('left');
    } else if(event.which == '39') {
       // right arrow - run code to move forward a page
       alert('right');
    }
 });

Table of key events by browser and keys: http://www.quirksmode.org/js/keys.html 按浏览器和键的键事件表: http : //www.quirksmode.org/js/keys.html

List of key codes: http://www.cambiaresearch.com/c4/702b8cd1-e5b0-42e6-83ac-25f0306e3e25/Javascript-Char-Codes-Key-Codes.aspx 关键代码列表: http : //www.cambiaresearch.com/c4/702b8cd1-e5b0-42e6-83ac-25f0306e3e25/Javascript-Char-Codes-Key-Codes.aspx

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM