vueJS 015 監聽鍵盤事件 修飾鍵

參考文件

vue 監聽鍵盤事件api

mdn keyboardevent.key 鍵盤按鍵別名大全

監聽enter事件

vue 案例：

<

!-- 只有在 `key`
是 `enter`
時呼叫 `vm.submit()`
-->
"submit"
>

v-on:keyup.鍵盤按鍵別名

vue提供的按鍵別名具有相容性

自定義按鍵別名

vue 自定義api

通過全域性 config.keycodes 物件自定義按鍵修飾符別名

// 可以使用 `v-on:keyup.f1`

vue.config.keycodes.f1 =
112

請注意修飾鍵與常規按鍵不同，在和 keyup 事件一起用時，事件觸發時修飾鍵必須處於按下狀態。即，只有在按住 ctrl 的情況下釋放其它按鍵，才能觸發 keyup.ctrl。而單單釋放 ctrl 也不會觸發事件。如果你想要這樣的行為，請為 ctrl 換用 keycode：keyup.17。

exact 修飾符

<

!doctype html>
"zh"
>
"utf-8"
>
"viewport"
content=
"width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
>
"x-ua-compatible" content=
"ie=edge"
>
document<
/title>
"stylesheet" href=
"../css/normalize.css"
>
"stylesheet" href=
"../css/bootstrap.css"
>
"../js/vue2.6.11.js"
>
<
/script>
"text/css"
>
button
<
/style>
<
/head>
>
<
!-- 即使 alt 或 shift 被一同按下時也會觸發 --
>
"click2"
>即使 alt 或 shift 被一同按下時也會觸發<
/button>
<
!-- 有且只有 ctrl 被按下的時候才觸發 --
>
"onctrlclick"
>有且只有 ctrl 被按下的時候才觸發<
/button>
<
!-- 沒有任何系統修飾符被按下的時候才觸發 --
>
"click3"
>沒有任何系統修飾符被按下的時候才觸發<
/button>
<
/div>
let vm =
newvue(,
onctrlclick()
,click3()
}});
<
/script>
<
/body>
<
/html>

這些修飾符會限制處理函式僅響應特定的滑鼠按鈕。

<

!doctype html>
"zh"
>
"utf-8"
>
"viewport"
content=
"width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
>
"x-ua-compatible" content=
"ie=edge"
>
document<
/title>
"stylesheet" href=
"../css/normalize.css"
>
"stylesheet" href=
"../css/bootstrap.css"
>
"../js/vue2.6.11.js"
>
<
/script>
"text/css"
>
button
<
/style>
<
/head>
>
"click2"
>
(左)信天翁 即將滅亡<
/button>
"click2"
>
(中)信天翁 即將滅亡<
/button>
"click2"
>
(右)信天翁 即將滅亡<
/button>
<
/div>
let vm =
newvue(}
});<
/script>
<
/body>
<
/html>

Flex 監聽鍵盤事件

flex 監聽鍵盤事件 2010 05 19 10 15 一 說明 1 只有當監聽的物件獲取焦點後，才能出接收到keyboardevent.key down event。二例子為應用程式的stage或元件的keydown事件新增 讀取keyboardevents的keycode屬性。使用keydow...

js監聽鍵盤事件

一 監聽全域性鍵盤按下事件，例如監聽全域性回車事件 d ocum ent key down fun ctio n ev ent if e vent key code 13 a lert 你按 下了en ter 二 監聽 某個元件 鍵盤按下 事件 如 butt on按鈕 do cume nt keyd...

Flex 監聽鍵盤事件

flex 監聽鍵盤事件 2010 05 19 10 15 一 說明 1 只有當監聽的物件獲取焦點後，才能出接收到keyboardevent.key down event。二例子為應用程式的stage或元件的keydown事件新增 讀取keyboardevents的keycode屬性。使用keydow...