vue 鍵盤操作事件

2021-10-07 12:26:03 字數 984 閱讀 2221

需求:

當按鍵盤enter鍵和鍵盤左右鍵時,左右切換頁面卡片並讀取卡片上的資訊

一、獲取鍵盤對應的keycode

keycode

實際鍵值

48到57

0到965到90

a到z(a到z)

112到135

f1到f24

8backspace(退格)

9tab

13enter(回車)

20caps_lock(大寫鎖定)

32space(空格鍵)

37left(左箭頭)

38up(上箭頭)

39right(右箭頭)

40down(下箭頭)

二、繫結鍵盤事件方法屬性值

描述onkeydown

script

當按下按鍵時執行指令碼

onkeypress

script

當按下並鬆開按鍵時執行指令碼

onkeyup

script

當鬆開按鍵時執行指令碼

這裡繫結keyup方法,@keyup.native

// 繫結並新增對應方法

handlerkeychange($ev)

if($ev.keycode === 37)

...}

注意:

1、internet explorer/chrome 瀏覽器使用 event.keycode 取回被按下的字元,而 netscape/firefox/opera 等瀏覽器使用 event.which

2、 獲得 unicode 編碼值之後,如果需要得到實際對應的按鍵值,可以通過 srting 物件的 fromcharcode 方法(string.fromcharcode())獲得

vue 鍵盤操作事件

需求 當按鍵盤enter鍵和鍵盤左右鍵時,左右切換頁面卡片並讀取卡片上的資訊 一 獲取鍵盤對應的keycode keycode 實際鍵值 48到57 0到965到90 a到z a到z 112到135 f1到f24 8backspace 退格 9tab 13enter 回車 20caps lock 大...

屬性操作,事件,節點

事件滑鼠事件mouseover等 節點 window.onload function script var btn document.getelementbyid btn var dv document.getelementbyid box1 btn.onclick function 會出現冒泡,由...

vue監聽組建鍵盤事件

表單提交時需要處理輸入框的回車事件,一般的原生input標籤可以用 keyup.enter onsubmit tips onsubmit為定義的方法 但是在組建裡就不好用,需要多加乙個native,如下 keyup.enter onsubmit 改寫為 keyup.enter.native onsu...