海南新聞最新消息太原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>