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

一、常见的键盘事件

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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/424469.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！