在使用jQuery开发页面的过程中,键盘上下键的移动是非常常见的需求。下面介绍一种使用jQuery监听键盘事件来实现键盘上下键移动的方法。
$(document).keydown(function (event) {var keyCode = event.keyCode;if (keyCode == 38 || keyCode == 40) { // 上下键的keyCode是38和40event.preventDefault(); // 阻止默认行为(即滚动页面)var current = $(".active");if (keyCode == 38) {if (current.prev().length) { // 如果有上一个元素current.removeClass("active");current.prev().addClass("active");}} else {if (current.next().length) { // 如果有下一个元素current.removeClass("active");current.next().addClass("active");}}}});
上述代码在整个文档中监听键盘事件,当用户按下键盘上下键时,会触发keydown事件。在事件处理函数中,首先获取按下的键的keyCode,判断是否是上下键。如果是上下键,则阻止默认行为(即滚动页面),接着获取当前被选中的元素,并判断按下的是上键还是下键。如果是上键,就查找当前元素的前一个兄弟元素,如果存在则将当前元素的样式切换为未选中状态,将前一个兄弟元素的样式切换为选中状态;如果是下键,则查找当前元素的下一个兄弟元素,如果存在则将当前元素的样式切换为未选中状态,将下一个兄弟元素的样式切换为选中状态。