VueJS - 如何检测Ctrl + V?

时间:2017-03-10 06:15:06

标签: javascript vue.js vuejs2 textinput

我已经看到了 this question 的答案,但它不是我需要的解决方案,因为它是 jQuery < / strong>,我需要 vue.js 的内容。

到目前为止,我能够使用ff检测单个字符的按下。代码:

&#13;
&#13;
export default {
  name: 'game',

  data () {
    return {
      allowInput: false,
      disabledKeys: ['ArrowLeft', 'Home', 'Control']
    }
  },

  methods: {
    keymonitor: function (event) {
      console.log(event.key)
      
      if (this.disabledKeys.indexOf(event.key) >= 0) {
        event.preventDefault()
        this.allowInput = false
        // alert('not allowed')
      } else {
        this.allowInput = true
      }
    },

    checkAnswer () {
      if (! this.allowInput) {
        alert('the key(s) you pressed is/are not allowed')
      }
    } /* END checkAnswer */
  } /* END methods */
} /* END export default */
&#13;
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.2/vue.min.js"></script>

<input id="typeBox" ref="typeBox" autocomplete="off" placeholder="Type here..."
       @keydown="keymonitor" @keyup="checkAnswer()" />
&#13;
&#13;
&#13;

上面的代码成功阻止文本框接受 ArrowLeft Home Control 键按下。

问题:

我试图找出如何检测 Ctrl + V ,因为我想在文本框中阻止粘贴操作。有谁知道如何做到这一点?提前谢谢。

2 个答案:

答案 0 :(得分:14)

要检测两个键,Vue提供modifier keys,例如,要检测 Alt + C ,您只需执行以下操作:

<input @keyup.alt.67="YourFn">

对于 Ctrl + V ,您可以这样做:

<input @keyup.ctrl.76="YourFn">

我可以看到here Ctrl + v 的ASCII代码是22,所以你应该能够做到:

<input @keyup.22="YourFn">

答案 1 :(得分:0)

您可以检查 js 小提琴链接是否相同

keyup: function(event){
    if(event.keyCode == 86 && event.ctrlKey){
    // do something here
  }
}

https://jsfiddle.net/neelkansara28/wh61rby8/16/