东莞专业技术人才服务网优化seo培训班
一、常见的键盘事件
- 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>