VueJS - 如何检测 Ctrl+V？答案

【问题标题】：VueJS - How to detect Ctrl+V?VueJS - 如何检测 Ctrl+V？
【发布时间】：2017-07-31 09:27:27
【问题描述】：

我已经看到了this question的答案，但这不是我需要的解决方案，因为它是针对jQuery的，我需要一些针对的东西vue.js.

到目前为止，我能够使用 ff.代码：

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 */

<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()" />

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

问题：

我试图弄清楚如何检测 Ctrl+V，因为我想阻止在我的文本框中进行粘贴操作。有谁知道如何做到这一点？提前致谢。

【问题讨论】：

请检查sn-p，你在里面使用exports :)
可以使用与您引用的答案相同的方法。只需使用 document.addEventListener 而不是 jQuery 方法。
stackoverflow.com/questions/2903991/… 这是使用 keyup 和 keydown 事件的答案
@Amresh 我知道它在此处的 sn-p“工具”中引发了错误，但它现在在我的开发环境中没有任何错误。

标签： javascript vue.js vuejs2 textinput

【解决方案1】：

检测两个键，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">

【讨论】：

尽管我很喜欢这个答案，但有一个note 说： ...keyup.ctrl 只有在按住 ctrl 时释放一个键才会触发。单独释放ctrl键不会触发。
这就像魔术一样！我什至可以将它与我现有的 @keyup/@keydown 函数一起使用。 @keydown.22 没有做任何事情，所以我改用了@keydown.ctrl.86。非常感谢您的帮助！

【解决方案2】：

你可以检查 js fiddle 链接是否相同

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

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

【讨论】：