CODEWITHSUNDEEP
javascriptvue.jsvuejs2
Yeasir Arafat Majumder
Yeasir Arafat Majumder

Reputation: 1264

vuejs2 listening for if the user pressed the @ key

I know i can listen for key events in vue.js and add modifiers to those events like keyup.enter. But i can't seem to find a modifier for the @ key, something like keyup.AT or keyup.at etc.

Is there a way to watch for this key event in vue.js2?

thanks,

Upvotes: 3

Views: 333

Answers (1)

Bert
Bert

Reputation: 82489

You can use @keyup.shift.50 to capture that both the ⇧ and 2 keys were pressed on non-mobile QWERTY and DVORAK keyboards. I'm not sure about foreign keyboards.

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>

This solution, however, will not trigger for mobile keypads where the @ key has a dedicated button. I don't think there is a way to handle that using an event modifier in Vue, so you would have to resort to handling the keyup event and examining the event object.

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>

Upvotes: 1

Related Questions