获取用户按下的键

最新推荐文章于 2023-01-10 08:38:29 发布

广东话的蛇皇

最新推荐文章于 2023-01-10 08:38:29 发布

阅读量243

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_43618136/article/details/104350633

版权

前端专栏收录该内容

352 篇文章 1 订阅

订阅专栏

获取用户按下的键

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    div{
      width: 200px;
      height: 100px;
      background-color: red;
    }
  </style>
  <script src="jquery-1.12.1.js"></script>
  <script>
    $(function () {
      $(document).mousedown(function (e) {
        //判断用户按下鼠标的时候,有没有按下alt键
       //console.log(e.altKey);
        if(e.altKey){
          //用户按下了alt键的同时也按下鼠标了
          console.log("按下了alt键,鼠标也按下了");
        }else if(e.shiftKey){
          //用户按下了shift键,同时按下鼠标
          console.log("按下了shift键,鼠标也按下了");
        }else if(e.ctrlKey){
          //用户按下了ctrl键,同时按下鼠标
          console.log("按下了ctrl键,鼠标也按下了");
        }else{
          console.log("用户按下了鼠标");
        }
      });
    });
  </script>
</head>
<body>
<div id="div"></div>

</body>
</html>

根据按键改变样式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    div{
      width: 800px;
      height: 600px;
      background-color: gray;
      background-color: ;
    }
  </style>
  <script src="jquery-1.12.1.js"></script>
  <script>
    $(function () {
      //用户在页面按键,可以改变div的背景颜色
      $(document).keydown(function (e) {
        switch (e.keyCode){
          case 65:$("#div").css("backgroundColor","red");break;
          case 66:$("#div").css("backgroundColor","green");break;
          case 67:$("#div").css("backgroundColor","blue");break;
        }
      });
    });
  </script>
</head>
<body>
<div id="div"></div>

</body>
</html>