海南新聞最新消息太原seo管理
一、常見的鍵盤事件
- onkeydown????????某個鍵盤按鍵被按下
- onkeypress? ? ? ? 某個鍵盤按鍵被按下
- onkeyup? ? ? ? ? ? 某個鍵盤按鍵被松開
二、事件的執(zhí)行順序?onkeydown、onkeypress、onkeyup
- down? ? ? 事件先發(fā)生；
- press? ? ? 發(fā)生在文本被輸入；
- up? ? ? ? ? 發(fā)生在文本輸入完成；
怎么區(qū)分onkeydown，?onkeypress？實際開發(fā)中并沒有對這2個有嚴(yán)格的區(qū)分。
onkeydown 更側(cè)重于按鍵動作本身，而 onkeypress 更注重實際字符的輸入。如果你關(guān)心的是按鍵操作，如游戲控制或鍵盤快捷鍵，onkeydown 比較合適；如果你需要識別用戶輸入的文字，onkeypress 更適合。
onkeypress有可能按下鍵后沒有松手（我自己理解press中文翻譯是按壓，代表還有壓力嘛，所以有可能還沒有松手），他會一直執(zhí)行?onkeydown、onkeypress事件。
三、我們可以通過key和code來區(qū)分按下的鍵
- 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>四、實戰(zhàn)演練
需求1：點擊按鈕進(jìn)行搜索。
需求2：敲我們的enter鍵也能觸發(fā)搜索。
<!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);// }// 點擊按鈕進(jìn)行搜索btnEl.onclick = function () {console.log("進(jìn)行搜索", inputEl.value);}inputEl.onkeyup = function () {if (event.key === "Enter") {console.log("進(jìn)行搜索", 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);// }// 點擊按鈕進(jìn)行搜索btnEl.onclick = function () {console.log("進(jìn)行搜索", inputEl.value);}inputEl.onkeyup = function (event) {if (event.key === "Enter") {console.log("進(jìn)行搜索", inputEl.value);}}// 按個s鍵，自動獲取輸入框的焦點。document.onkeyup = function (event) {if (event.code === "KeyS") {console.log("用戶點擊了s");inputEl.focus()}}</script></body></html>