jQuery实现：目标未定义时阻止对应键盘按键生效（Rails场景）

嘿，这个需求我之前碰过好几次，用jQuery就能轻松搞定，我给你捋清楚步骤和代码：

核心思路 #

我们需要监听键盘的左右箭头按键事件，然后根据当前页面是否是第一页/最后一页，决定是否触发上一页/下一页的跳转。关键在于：

• 第一页时，上一页链接要么不存在，要么处于禁用状态，此时左箭头键不做任何操作
• 最后一页时，下一页链接要么不存在，要么处于禁用状态，此时右箭头键不做任何操作

代码实现（分两种场景） #

场景1：手动生成分页链接（自定义ID）

假设你在Rails视图里是这样生成上一题/下一题链接的（给链接加唯一ID方便jQuery选择）：

<!-- 上一题链接：只有当前不是第一页时才渲染 -->
<%= link_to '上一题', previous_question_path, id: 'prev_page' unless current_page == 1 %>

<!-- 下一题链接：只有当前不是最后一页时才渲染 -->
<%= link_to '下一题', next_question_path, id: 'next_page' unless current_page == total_pages %>

对应的jQuery代码：

$(document).ready(function() {
  // 监听全局键盘按下事件
  $(document).on('keydown', function(e) {
    // 左箭头键（keyCode 37）
    if (e.keyCode === 37) {
      // 获取上一页链接元素
      const $prevLink = $('#prev_page');
      // 只有链接存在时才触发跳转
      if ($prevLink.length > 0) {
        $prevLink[0].click(); // 用原生click更贴近用户点击行为
      }
      e.preventDefault(); // 阻止箭头键默认的页面滚动行为
    }
    // 右箭头键（keyCode 39）
    else if (e.keyCode === 39) {
      const $nextLink = $('#next_page');
      if ($nextLink.length > 0) {
        $nextLink[0].click();
      }
      e.preventDefault();
    }
  });
});

场景2：使用分页插件（比如will_paginate）

如果用的是像will_paginate这类分页插件，它会自动给分页链接加类名（.prev_page和.next_page），并且在第一页/最后一页时给对应链接加disabled类。这种情况下代码可以调整为：

$(document).ready(function() {
  $(document).on('keydown', function(e) {
    if (e.keyCode === 37) {
      // 选择未被禁用的上一页链接
      const $prevLink = $('.prev_page:not(.disabled)');
      if ($prevLink.length) {
        $prevLink[0].click();
      }
      e.preventDefault();
    } else if (e.keyCode === 39) {
      const $nextLink = $('.next_page:not(.disabled)');
      if ($nextLink.length) {
        $nextLink[0].click();
      }
      e.preventDefault();
    }
  });
});

关键细节说明 #

• 用keydown事件而不是keypress：因为箭头键在部分浏览器中不会触发keypress事件，keydown兼容性更好
• 原生click()：相比jQuery的click()方法，原生调用更直接，避免触发额外绑定的事件
• e.preventDefault()：防止箭头键默认的页面滚动，让用户体验更流畅

这样测试下来，第一页按左箭头完全没反应，最后一页按右箭头也不会跳转，完美符合你的需求～

内容的提问来源于stack exchange，提问作者mazing