模拟京东按键输入内容

案例分析：

1.检测用户是否按下s键，如果按下s键，就把光标定位到搜索框里面；

2.使用键盘事件对象里面的keyCode判断用户按下的是否是s键；

3.搜索框获得焦点：使用js里面的focus()方法。

效果（按下键盘上s键，搜索框会获得焦点）：

代码：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>京东按键输入内容</title>
 6     </head>
 7     <body>
 8         <input type="text">
 9         <script>
10             var search = document.querySelector('input');
11             document.addEventListener('keyup',function(e){
12                 //用keyup弹起的时候获取焦点，s不会输入
13                 //用keydown的话按下的时候就获取焦点，s会加入到搜索框里面
14                 // console.log(e.keyCode);
15                 if(e.keyCode === 83){
16                     search.focus();         //搜索框获取焦点
17                 }
18             })
19         </script>
20     </body>
21 </html>

posted on 2020-05-18 14:44 SailorM 阅读(205) 评论(0) 编辑收藏举报