如何用JavaScript的AddEventListener实现回车刷新页面及修改系统快捷键

一、按下回车键刷新页面 #

要实现按下回车键时刷新页面，你可以监听keydown事件，判断按下的键是否为回车键，再调用location.reload()方法。如果页面包含输入框、文本域等可编辑元素，建议添加判断排除这些场景，避免干扰用户输入：

document.addEventListener('keydown', function(e) {
  // 匹配回车键（兼容key和keyCode两种写法）
  if (e.key === 'Enter' || e.keyCode === 13) {
    // 排除输入框、文本域等元素
    const editableTags = ['INPUT', 'TEXTAREA'];
    if (!editableTags.includes(e.target.tagName)) {
      e.preventDefault(); // 阻止默认行为（如表单提交）
      location.reload(); // 执行页面刷新，效果等同于按下F5
    }
  }
});

如果不需要排除输入框场景，直接移除editableTags相关判断即可。

二、修改已有快捷键（以F5为例） #

浏览器默认F5为刷新页面，要修改它的行为，需先阻止默认刷新动作，再添加自定义逻辑：

document.addEventListener('keydown', function(e) {
  // 匹配F5键（兼容key和keyCode两种写法）
  if (e.key === 'F5' || e.keyCode === 116) {
    e.preventDefault(); // 阻止浏览器默认的刷新行为
    // 这里替换为你的自定义操作
    alert('F5快捷键已修改，不再执行默认刷新');
    // 若需要自定义刷新逻辑，可在此调用对应函数
    // customRefresh();
  }
});

关键注意点 #

• keyCode已被标记为废弃，但目前多数浏览器仍支持，建议同时使用标准的key属性提升兼容性。
• 部分浏览器或第三方插件可能拦截自定义快捷键，这种情况无法通过前端代码解决。
• 自定义快捷键时尽量避开系统/浏览器默认组合，避免影响用户的常规操作习惯。

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