[英]Keyboard shortcut to navigate a website
I'm building a PHP application framework where all pages are created dynamically such as: 我正在建立一个PHP应用程序框架,其中所有页面都是动态创建的,例如:
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.