今天做项目,遇到一个需求。点击输入框获取焦点,按下回车后,执行搜索,失去焦点。
为什么会有这样的需求
以下内容,不考虑部分输入法等兼容性问题
项目大致要求是这样子的:
- 页面提供搜索框,同时提供搜索历史方便直接选择;
- 输入内容后,按回车,自动进行搜索,结果显示在下方区域。同时历史记录隐藏;
- 再次进行输入内容时候,搜索结果移除,继续显示搜索记录提供方便选择。
问题点
梳理需求后,其实可以简单理解整个流程,用一个状态进行表示:
搜索框获得焦点 => 显示历史记录
搜索框失去焦点 => 显示搜索结果
这个状态改变的规则为:
搜索框输入完毕(回车) => 搜索框失去焦点
搜索框被点击 => 搜索框获得焦点
第一版代码
1 |
|
整体逻辑没问题,唯独就是,输入完毕提交后,输入框不会失去焦点,也就无法通过点击再次出发 focus
事件了。
第二版调整
考虑到要让输入框失去焦点,采用增加一个元素,并让其获得焦点即可。
但是增加的元素要有一些要求:
- 这个元素能获得焦点,那就得是控件元素
- 这个元素必须在页面内,还必须得显示,否则不能获得焦点
综合这两点,我选择 input-radio
控件,比较小巧不明显,而且不会触发移动端的输入法,同时,只能定位到屏幕外侧。
1 | // new |
这样就曲线救国,通过 js 让指定元素失去焦点了。