zoukankan      html  css  js  c++  java
  • 模拟京东按键输入内容

    案例分析:

    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>
  • 相关阅读:
    @bzoj
    @hdu
    @noi.ac
    @noi.ac
    @noi.ac
    jsp include page指令标记
    javascript 对象(DOM)document window history
    HTML 标准属性 和 事件属性
    html 特殊字符 fmt table A
    mysql 启动 导入sql文件
  • 原文地址:https://www.cnblogs.com/cy1227/p/12910494.html
Copyright © 2011-2022 走看看