html表单无法直接获取视线轨迹,需用mousemove、focus/blur、scroll等代理信号推测注意力;应避免误用intersectionobserver,聚焦字段级行为链聚合与合理埋点。

HTML 表单里根本没法直接获取视线轨迹
浏览器原生不提供 eyeTracking API,也没有 onGaze 事件。所谓“表单视线跟踪”,本质是用鼠标移动、焦点切换、滚动偏移、停留时长等代理信号去推测用户注意力——不是真读心,是合理猜。
用 mousemove + focus + scroll 拼凑注意力线索
真正能落地的做法是监听三类行为,再加简单规则关联到表单字段:
-
mousemove在表单区域触发时,记录坐标并用document.elementFromPoint()反查最近的input或label -
focus和blur事件比纯鼠标更可靠,尤其对键盘用户;给每个input绑定data-field-id方便归因 -
scroll触发时检查表单域是否进入视口(用getBoundingClientRect()),避免把用户划走后的“假停留”算进去
示例:监听输入框获得焦点后 2 秒内是否有鼠标移动靠近它,就记为一次“视觉确认”。
别碰 IntersectionObserver 做视线判断
它只管元素是否在视口,不管用户眼睛看没看。常见误用是给每个 input 配一个 IntersectionObserver,结果只要表单在页面上、用户没滚走,所有字段都长期“可见”——数据全废。
立即学习“前端免费学习笔记(深入)”;
- 它无法区分“屏幕上有”和“眼睛在看”
- 移动端小屏下,多个输入框常同时在视口,完全无法定位焦点
- 开启
trackVisibility: true也解决不了,因为浏览器不会上报瞳孔位置
埋点字段命名和上报时机很关键
上报数据不是越细越好,重点得能回溯行为链:
- 字段名统一用
field_id(如"email_input"),别用name或id,防止后端解析冲突 - 每个事件带时间戳
ts和类型type: "focus" | "hover_near" | "scroll_into_view" - 不要每毫秒发一次请求,用
setTimeout聚合 500ms 内的同类事件再上报,否则卡顿且日志爆炸
真正难的是把零散信号串成一条可信路径:比如用户先 focus 了密码框,3 秒后鼠标移到它右侧 100px 内,再过 1 秒滚动离开——这才能算一次有效注视。中间任意一环缺失或超时,就该丢弃。











