如何使用JavaScript设置F1/F2/F3/F4快捷键替代回车提交AJAX表单

核心逻辑 #

• 拦截回车键的默认表单提交行为，避免触发原生提交
• 监听键盘事件，识别F1-F4的按键码（对应112-115）
• 检测到目标按键时，执行AJAX提交表单的逻辑

完整代码示例 #

HTML 表单结构

<form id="myForm" action="/submit" method="POST">
  <input type="text" name="username" placeholder="用户名" required>
  <input type="password" name="password" placeholder="密码" required>
</form>

JavaScript 实现

const form = document.getElementById('myForm');

// 监听表单键盘事件
form.addEventListener('keydown', function(e) {
  // 禁用回车键提交
  if (e.keyCode === 13) {
    e.preventDefault();
    return;
  }

  // 检测F1-F4按键
  const shortcutKeys = [112, 113, 114, 115];
  if (shortcutKeys.includes(e.keyCode)) {
    e.preventDefault(); // 阻止F键的原生浏览器行为（比如F1打开帮助）
    submitFormWithAJAX();
  }
});

// AJAX提交表单函数
function submitFormWithAJAX() {
  const formData = new FormData(form);

  fetch(form.action, {
    method: form.method,
    body: formData,
    headers: {
      // 若需要指定请求头可在此添加，比如CSRF令牌
      // 'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]').content
    }
  })
  .then(response => {
    if (!response.ok) throw new Error('提交失败');
    return response.json();
  })
  .then(data => {
    console.log('提交成功:', data);
    // 这里可以添加提交成功后的逻辑，比如重置表单、显示提示
    form.reset();
  })
  .catch(error => {
    console.error('提交出错:', error);
    // 处理错误，比如显示错误提示
  });
}

关键说明 #

• 用keydown事件而非keyup，确保按键按下时及时拦截，避免延迟
• 必须拦截F键的原生行为，否则浏览器会触发默认动作（如F1打开帮助页面）
• FormData可自动收集表单所有控件的值，无需手动拼接参数
• 若后端需要特定格式数据（如JSON），可将FormData转为对象后再序列化

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