JavaScript之键盘相关信息

最新推荐文章于 2022-11-21 23:18:12 发布

牛先森家的牛奶

最新推荐文章于 2022-11-21 23:18:12 发布

阅读量146

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_42681295/article/details/106945152

版权

JavaScript 专栏收录该内容

39 篇文章 1 订阅

订阅专栏

键盘相关信息

键盘事件(一般只给可以输入内容的元素绑定或者 window绑定)

1、onkeydown （按下键盘键的时候触发）
2、onkeyup （松开键盘键的时候触发）
3、onkeypress （按下字符键的时候触发，不包括Ctrl和shift等）

 <input type="text" id="btn">
  <script>
    var btn = document.querySelector('#btn');
    //当input有输入内容时，触发按键按下事件
    btn.onkeydown = function (e) {
      e = e || window.event;
      console.log(e);
    }
  </script>

在这里插入图片描述

说明

which：如果是 keydown 或者 keyup事件的时候得到是键盘的编码
which：如果按下的 keypress 得到的值字符的 ASCII码
key：得到键盘字符
altKey：表示你按下的是否是 alt
ctrlKey：表示你按下的是否是 ctrl
shiftKey：表示你按下的是否是 shift （true和false）
keyCode：表示键盘的键码

注意：keyup和keypress不能监听多个键盘事件，比如同时按下Ctrl和shift键的话，他们两个可能接收不到按下信息

Keycode对照表

在这里插入图片描述

案例说明

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    .box {
      width: 800px;
      margin: auto;
    }

    .box .content {
      width: 100%;
      height: 350px;
      border: 1px solid #ccc;
      margin: 20px auto;
      padding: 10px;
      box-sizing: border-box;
    }

    .box .content li {
      margin: 10px 0;
      padding: 5px;
      line-height: 2;
      border-radius: 5px;
      clear: both;
    }

    .box textarea {
      height: 80px;
      display: block;
      margin: auto;
      margin-top: 20px;
      width: 100%;
    }

    .box button {
      width: 80px;
      height: 30px;
      border: 1px solid #ccc;
      float: right;
      margin-top: 10px;
    }

    .active {
      float: right;
      background-color: #fc0;
      color: #fff;
    }

    p {
      color: #ccc;
      font-size: 12px;
    }
  </style>
</head>

<body>
  <div class="box">
    <ul class="content"></ul>
    <textarea name="" id="text" cols="30" rows="10"></textarea>
    <button id="btn">发送</button>
    <p>温馨提示：按 ctrl + shift键也可以发送消息哟</p>
  </div>

  <script>
    /*
      【1】点击发送按钮的时候 获取输入框的信息
      【2】把信息 写入 content里面
    */
    //  获取所需要的元素
    var content = document.querySelector('.content');
    var text = document.querySelector('#text');
    var btn = document.querySelector('#btn');

    // 给按钮绑定点击事件
    btn.onclick = function () {
      if (text.value) {
        render()
      } else {
        alert('请输入内容')
      }
    }

    // 按下ctrl + shift键也可以发送信息
    text.onkeydown = function (e) {
      // console.log(e.ctrlKey);
      // keydown 可以同时监听多个按下的事件
      // 注意：keyup 和 keypress 不能监听多个事件
      if (e.ctrlKey && e.shiftKey) {
        if (text.value) {
          render()
        } else {
          alert('请输入内容')
        }
      }
    }

    function render() {
      // 获取输入框的内容 并且还要创建一个元素来接收内容
      var li = document.createElement('li');
      li.className = 'active';
      li.innerHTML = text.value;

      // 把创建的这个标签写入 content
      content.appendChild(li);

      // 清空输入框的内容
      text.value = ''
    }
  </script>
</body>

</html>

当按下Ctrl和shift键时，触发调用函数render
注意：keydown可以监听多个键盘按下事件

牛先森家的牛奶

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript之键盘相关信息

键盘相关信息键盘事件(一般只给可以输入内容的元素绑定或者 window绑定)1、onkeydown （按下键盘键的时候触发）2、onkeyup （松开键盘键的时候触发）3、onkeypress （按下字符键的时候触发，不包括Ctrl和shift等） <input type="text" id="btn"> <script> var btn = document.querySelector('#btn'); //当input有输入内容时，触发按键按下事
复制链接

扫一扫