先说下环境,Mac OS El Capitan + Chrome 46,框架是Backbone + Boostrap。
我做了一个自动搜索组件,独立测试时一切正常,放到产品中,别的都没问题,只有回车会出问题。代码在这里
不用说,这个问题很诡异,调试了半天没有头绪,只能通过观察现象去推测:
- 没有报错
- 除了回车,其它功能正常
- 除了回车,
keyUpHandler
都能被正确触发 - 回车后,光标跳到其它元素
看来看去,第4条最可疑——我按的是回车,它会什么会跳到别的单元格呢?
这次运气比较好,表单中的接下来的几个元素刚好是日期,用到Bootstrap Datetimepicker这个插件,focus
之后会自动填充日期。于是我发现,每次跳到的“其它元素”,都是原先空白的,而且是required
的;不会跳到固定的,或者紧挨着的那个文本框。
于是我便想,会不会是:
- 表单
submit
在keydown
之后触发 - 触发之后进行表单验证,发现有未填的
required
元素,于是跳到该元素并提示 - Bootstrap Datetimepicker响应
focus
时间,填入日期,提示消失 - 我的Typeahead响应
blur
事件,隐藏列表 keyup
事件触发,但是输入框已没有焦点,就没有触发
这个推测看起来有点道理,于是我把侦听的事件改成keydown
,问题果然解决。
欢迎吐槽,共同进步