二、（JS）JS中常见的键盘事件

覆水难收呀

于 2024-09-15 17:50:11 发布

阅读量292

点赞数 3

分类专栏： JS 文章标签： javascript 开发语言

本文链接：https://blog.csdn.net/Sean_0819/article/details/142184148

版权

JS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、常见的键盘事件

onkeydown 某个键盘按键被按下
onkeypress 某个键盘按键被按下
onkeyup 某个键盘按键被松开

二、事件的执行顺序 onkeydown、onkeypress、onkeyup

down 事件先发生；
press 发生在文本被输入；
up 发生在文本输入完成；

怎么区分onkeydown， onkeypress？实际开发中并没有对这2个有严格的区分。

onkeydown 更侧重于按键动作本身，而 onkeypress 更注重实际字符的输入。如果你关心的是按键操作，如游戏控制或键盘快捷键，onkeydown 比较合适；如果你需要识别用户输入的文字，onkeypress 更适合。

onkeypress有可能按下键后没有松手（我自己理解press中文翻译是按压，代表还有压力嘛，所以有可能还没有松手），他会一直执行 onkeydown、onkeypress事件。

三、我们可以通过key和code来区分按下的键

code：“按键代码（“KeyA”，“ArrowLeft”等），特定于键盘上按键的物理位置。
key：字符（“A”， “a”等），对于非字符（non-character）的按键，通常具有与code相同的值。

那怎么获取？

答：event.key, event.code

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <input type="text">

  <script>

    var inputEl = document.querySelector("input")

    inputEl.onkeydown = function () {
      console.log("keydown");
    }

    inputEl.onkeypress = function () {
      console.log("onkeypress");
    }

    inputEl.onkeyup = function (event) {
      console.log("onkeyup", event.key, event.code);
    }

  </script>


</body>

</html>

四、实战演练

需求1：点击按钮进行搜索。

需求2：敲我们的enter键也能触发搜索。

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <input type="text">
  <button>搜索</button>

  <script>

    var inputEl = document.querySelector("input")
    var btnEl = document.querySelector("button")

    // inputEl.onkeydown = function () {
    //   console.log("keydown");
    // }

    // inputEl.onkeypress = function () {
    //   console.log("onkeypress");
    // }

    // inputEl.onkeyup = function (event) {
    //   console.log("onkeyup", event.key, event.code);
    // }

    // 点击按钮进行搜索
    btnEl.onclick = function () {
      console.log("进行搜索", inputEl.value);
    }

    inputEl.onkeyup = function () {
      if (event.key === "Enter") {
        console.log("进行搜索", inputEl.value);
      }
    }


  </script>


</body>

</html>

需求3：我按个s键，获取输入框的焦点。

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <input type="text">
  <button>搜索</button>

  <script>

    var inputEl = document.querySelector("input")
    var btnEl = document.querySelector("button")

    // inputEl.onkeydown = function () {
    //   console.log("keydown");
    // }

    // inputEl.onkeypress = function () {
    //   console.log("onkeypress");
    // }

    // inputEl.onkeyup = function (event) {
    //   console.log("onkeyup", event.key, event.code);
    // }

    // 点击按钮进行搜索
    btnEl.onclick = function () {
      console.log("进行搜索", inputEl.value);
    }

    inputEl.onkeyup = function (event) {
      if (event.key === "Enter") {
        console.log("进行搜索", inputEl.value);
      }
    }

    // 按个s键，自动获取输入框的焦点。
    document.onkeyup = function (event) {
      if (event.code === "KeyS") {
        console.log("用户点击了s");
        inputEl.focus()
      }
    }


  </script>


</body>

</html>