[英]Why jQuery keyup is not working while I try to build keyboard shortcut on my website?
I'm trying to build keyboard shortcuts for accessibility in my website. 我正在尝试在我的网站上构建可访问性的键盘快捷键。 For example, when user presses '1' I want to move him to the home. 例如,当用户按下“1”时,我想将他移到家中。 When user presses '2', to a different page. 当用户按下'2'时,到另一页面。
I'm trying to use keyup for this but it's not working. 我正在尝试使用keyup,但它不起作用。
$(function() {
$(document).keyup(function(e) {
if (e.which == 1) {
console.log('1');
window.location.href = '/';
} else if (e.which == 2) {
window.location.href = '/escolas';
} else if (e.which == 3) {
window.location.href = '/noticias';
} else if (e.which == 4) {
window.location.href = '/eventos';
} else if (e.which == 5) {
window.location.href = '/contato';
}
});
});
Can someone help me? 有人能帮我吗? It's not logging 1 when I press '1'. 当我按'1'时,它不记录1。
It is because the key code for '1' is not 1 but 49 (or 97 for the one on the numpad). 这是因为'1'的关键代码不是1而是49(或者是小键盘上的那个)。
Check this to see your key code: 选中此项以查看密钥代码:
$(function() { $(document).keyup(function(e) { $('body').text(e.type + ' ' + e.which); }); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
You are using wrong keycodes. 您使用了错误的密钥代码。 Refer this 请参阅此
$(function() { $(document).keyup(function(e) { if (e.which == 49) { console.log('1'); window.location.href = '/'; } else if (e.which == 50) { window.location.href = '/escolas'; } else if (e.which == 51) { window.location.href = '/noticias'; } else if (e.which == 52) { window.location.href = '/eventos'; } else if (e.which == 53) { window.location.href = '/contato'; } }); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
You can get the key character by String.fromCharCode(event.which);
您可以通过String.fromCharCode(event.which);
获取关键字符String.fromCharCode(event.which);
, and then directly compare with actual character: ,然后直接与实际角色进行比较:
$(function() {
$(document).keyup(function(e) {
if (e.key) {
var key = e.key;
} else {
var key = String.fromCharCode(e.which || e.keyCode);
}
if (key == 1) {
console.log('1');
window.location.href = '/';
} else if (key == 2) {
window.location.href = '/escolas';
} else if (key == 3) {
window.location.href = '/noticias';
} else if (key == 4) {
window.location.href = '/eventos';
} else if (key == 5) {
window.location.href = '/contato';
}
});
});
e.which gives you ASCII value. e.which给你ASCII值。 To convert ASCII into character use String.fromCharCode(e.which) . 要将ASCII转换为字符,请使用String.fromCharCode(e.which) 。
$(function () {
$(document).keyup(function (e) {
if (String.fromCharCode(e.which) == 1) {
window.location.href = '/';
} else if (String.fromCharCode(e.which) == 2) {
window.location.href = '/escolas';
} else if (String.fromCharCode(e.which) == 3) {
window.location.href = '/noticias';
} else if (String.fromCharCode(e.which) == 4) {
window.location.href = '/eventos';
} else if (String.fromCharCode(e.which) == 5) {
window.location.href = '/contato';
}
});
});
If you wanna go fancy: 如果你想要幻想:
$(document).ready(function() { 'use strict'; const addresses = [ { codes: [49, 97], path: '/' }, { codes: [50, 98], path: '/escolas' }, { codes: [51, 99], path: '/noticias' }, { codes: [52, 100], path: '/eventos' }, { codes: [52, 101], path: '/contato' } ] $(document).on("keyup", evt => { const key = evt.which; addresses.map(address => { if(address.codes.filter(code => code === key).length) window.location.href = address.path; }) }); })
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.