mounted(){
this.showkey()
},
created: function() {
document.onkeydown = function() {
let key = window.event.keyCode;
if(key == 122) return false //禁用f11按键
};
},
keyCode 实际键值
48到57 0到9
65到90 a到z(A到Z)
112到135 F1到F24
8 BackSpace(退格)
9 Tab
13 Enter(回车)
20 Caps_Lock(大写锁定)
32 Space(空格键)
37 Left(左箭头)
38 Up(上箭头)
39 Right(右箭头)
40 Down(下箭头)
45 Insert(插入)
46 Delete(删除)
27 ESC
在Vue中,已经为常用的按键设置了别名,这样我们就无需再去匹配keyCode,直接使用别名就能监听按键的事件。
别名 实际键值
.delete delete(删除)/BackSpace(退格)
.tab Tab
.enter Enter(回车)
.esc Esc(退出)
.space Space(空格键)
.left Left(左箭头)
.up Up(上箭头)
.right Right(右箭头)
.down Down(下箭头)
.ctrl Ctrl
.alt Alt
.shift Shift
.meta (window系统下是window键,mac下是command键)
另外,Vue中还支持组合写法:
组合写法按键组合
@keyup.alt.67=”function”Alt + C
@click.ctrl=”function”Ctrl + Click
created: function() {
var _this = this;
document.onkeydown = function(e) {
let key = window.event.keyCode;
if(key == 119){
console.log('监听F8按键')
}else if(key == 120){
console.log('监听F9按键')
}else if(key == 121){
console.log('监听F10按键')
}};}
禁用键盘事件
//在methods中
showkey() {
document.onkeydown = function() {
console.log(window.event.returnValue);
if (window.event.keyCode == 116) {
window.event.returnValue = false;
}
console.log(window.event.returnValue);
};},
//mounted中调用
mounted () {
this.showkey()文章来源:https://www.toymoban.com/news/detail-853966.html
}文章来源地址https://www.toymoban.com/news/detail-853966.html
到了这里,关于vue禁用键盘上某个按键的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!