VueJS2监听用户是否按下了@键

3

我知道在vue.js中可以监听键盘事件并添加修饰符,例如keyup.enter。但是我似乎找不到@键的修饰符,类似于keyup.AT或keyup.at之类的东西。

有没有一种方法可以在vue.js2中监听这个键事件呢?

谢谢。

1个回答

1
你可以使用@keyup.shift.50来捕获在非移动QWERTY和DVORAK键盘上同时按下2键的情况。我不确定外国键盘是否适用。

console.clear()

new Vue({
  el: "#app",
  data:{
    log:[]
  },
  methods:{
    onAt(evt){
      this.log.push("@ pressed")
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<div id="app">
  <input type="text" @keyup.shift.50="onAt">
  <hr>
  <div v-for="msg in log">{{msg}}</div>
</div>

然而,这种解决方案在移动键盘上不会触发,因为 @ 键有一个专门的按钮。我认为在Vue中没有一种处理此情况的事件修饰符的方法,所以您需要使用 keyup 事件并检查事件对象来解决问题。

console.clear()

new Vue({
  el: "#app",
  data:{
    log:[]
  },
  methods:{
    onKeyUp(evt){
      if ("@" === evt.key)
        this.log.push("@ pressed")
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<div id="app">
  <input type="text" @keyup="onKeyUp">
  <hr>
  <div v-for="msg in log">{{msg}}</div>
</div>


嗨@Bert,谢谢你的回答!我不了解所有不同类型键盘的设置,但这对于所有设置/ MAC / Window等都有效吗? - Yeasir Arafat Majumder
@YeasirArafatMajumder,它基于JavaScript KeyboardEvent对象,但我真的不知道是否有一些键盘会使用不同的按键组合来输入@符号。据我所知,输入@符号的唯一方法是使用Shift和2键。这是一个我可能完全错误的情况。对于标准QUERTY键盘,是的,它可以工作。对于DVORAK键盘也是如此。对于外语键盘,你的猜测和我的一样好。 - Bert
移动设备有一个专门用于@字符的按键。你对于这些应该采取什么方法有什么想法吗? - Yeasir Arafat Majumder
1
@YeasirArafatMajumder 很好的观点。在移动键盘的情况下,我认为你无法使用修饰符来检测 @。你必须诉诸于处理事件并检查事件对象。我已经更新了答案,并加上了一个示例。 - Bert
在德国的Mac键盘上,@符号是<kbd>ALT</kbd><kbd>L</kbd>。而在德国的Windows键盘上,@符号则是ALTGR-Q。 - connexo

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接