← 返回目录

13. 表单事件与键盘事件

表单事件就是输入框聚焦、失焦、输入、回车这些交互。

核心六种：
① focus / blur——聚焦/失焦
② input——输入时实时触发
③ change——失焦且值变了才触发
④ keydown / keyup——按键按下/抬起
⑤ keypress——字符键按下
⑥ submit——表单提交

坑：input 比 change 实时、keydown 拿 keyCode、回车 keyCode 是 13、submit 要 preventDefault 阻止默认提交。

13.1 互动演示（边输入边看）

已输入 0 个字 
打字、 失焦、 按回车、 点提交： 看哪个事件触发， 下面同步代码与结论。

13.2 知识点逐条讲解

① 表单事件表

事件什么时候跑
input内容一变就跑（边打边跑）
change失焦且内容真变了才跑
focus / blur获得光标 / 失去光标
submit点提交按钮时跑（可以拦默认提交）
// 抓到那个输入框
let kw = document.getElementById('kw');

// 内容一变就跑（边打边跑）
kw.addEventListener('input', function () {
  // 边打边更新字数
  // 把字数显示出去
  lenTip.textContent = '已输入 ' + this.value.length + ' 个字';
});

② submit 一定要拦默认动作

// 抓到整个表单
let form = document.getElementById('demoForm');

// 点提交按钮时跑这个
form.addEventListener('submit', function (e) {
  // 先拦住默认提交，不写它页面就整个刷新白屏了！
  e.preventDefault();

  // 这里做校验
  console.log('统一校验后再决定真不真提交');
});

如果你点了提交按钮页面整个刷新白屏了，多半是漏了 e.preventDefault()。因为表单天生就会"提交+刷新"，做单页校验第一件事就是先拦住它。

③ 键盘事件与 e.key（回车搜索）

// 按下键盘任一键就跑这个
kw.addEventListener('keydown', function (e) {
  // e.key 告诉你按的是哪个键
  console.log('你按了：' + e.key);

  // 如果按的是回车
  if (e.key === 'Enter') {
    // 就把内容拿去搜索
    console.log('搜索：' + this.value);
  }
});

实战：用在哪 / 常见坑 / 怎么解决

① 用在哪：实时字数统计、回车搜索、登录表单提交校验。

② 常见坑：点提交页面整个刷新；按回车没反应。

③ 怎么解决：submit 里加 e.preventDefault()；键盘用 e.key === 'Enter' 判断回车。

一句话记住：input 边打边跑、change 失焦才跑、submit 要 preventDefault 拦；键盘用 e.key，e.key==='Enter' 做回车搜索。

本页重点

API作用参数返回值代码示例
input 事件内容一变就跑(边打边跑)addEventListener无inp.addEventListener('input', fn);
change / blur失焦且改了/失去光标addEventListener无inp.addEventListener('blur', fn);
e.preventDefault()拦表单默认提交刷新无无e.preventDefault();
e.key按的是哪个键无键名字符串if (e.key === 'Enter') fn();