Question

我正在使用Vue和Vanilla JS构建一个基本的@mention系统，但正在努力专门隔离“ @”字符。

在我的模板中：

listenForUser(e) {
    if (e.keyCode == 50 && e.shiftKey == true) {
        // do stuff
    }
}

在我的JS中：

e.keyCode == 50

最初，我只听e.shiftKey，但是“ 50”既对应于“ @”又对应于“ 2”，因此我无意间触发了该提及。

我添加了keyUp来尝试隔离“ @”字符，但是由于keyPress事件，我的用户必须在“ shift”之前释放“ @”键键-否则，它不会通过条件。

有没有办法做到这一点？

使用单个条件隔离“ @”字符
更改事件侦听器，以使键的顺序无关紧要。旧的int A = 5, B = 10, X = 5, Y = 5; var array = new[] { new { A, B }, new { A=X, B=Y } };方法可以满足我的需要，but that's been deprecated。

Answer 1

您可以检查e.key的{{1}}（而不是e.keyCode）

https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key

Answer 2

您可以在指令中使用.shift modifier和键码：

<trix-editor @keyup.shift.50="listenForUser" />

new Vue({
  el: '#app',
  methods: {
    mention() {
      console.log('mention')
    }
  }
})

<script src="https://unpkg.com/vue@2.6.3/dist/vue.min.js"></script>

<div id="app">
  <input type="text" @keyup.shift.50="mention">
</div>

Answer 3

对于未来的人们，这就是我最终要做的。 Trix有一个专有的事件侦听器，称为“ trix-change”，它监视编辑器本身的任何更改。这样可以解决keyup v。keydown的问题。

一旦事件监听器被触发，我就可以查看是否键入的最后一个字符与我的触发器匹配，如果匹配，则初始化搜索。这是一种与键盘无关的方法，可帮助我们解决所有各种键码问题。

以下代码：

editor.addEventListener('trix-change', e => {

    // Get contents of editor to a string
    let content = editor.getDocument().toString();

    // Get cursor position, and use it to determine the last character typed
    let cursorPosition = this.$refs.trix.editor.getPosition();
    let lastCharacterTyped = content.substring(cursorPosition - 1, cursorPosition);

    // If last character matches my trigger, init my search
    if (lastCharacterTyped == "@") {
        // Do Search Stuff
    }
})

Answer 4

<输入v-on：keydown。@ =“ functionFoo”>如果用户提交的@ v-on：keydown。@称为函数Foo和functionsFoo（inputInfo）收到了有关输入的所有信息，例如inputInfo.srcElement.selectionEnd ，inputInfo.srcElement.value等...我们无需编写任何if-s即可过滤@符号。 v-on：keydown。@ 它的意思是函数只会冷提交@符号。 enter link description here

<trix-editor ref="trix" @keydown.@="functionFoo"></trix-editor>

和您的JS函数

functionFoo = (inputInfo) => { // todo ... }

隔离keyUp上的“ @”字符以实现@mentions功能

4 个答案: