Javascript 隔离@&引用；@键控上的字符表示功能

我正在使用Vue和Vanilla JS构建一个基本的@提及系统，但我正在努力具体地隔离“@”字符

在我的模板中：

<trix-editor
    ref="trix"
    @keyup="listenForUser"
></trix-editor>

起初，我只是在听

e.keyCode==50

，但“50”同时对应于“@”和“2”，因此我无意中触发了提及

我在

e.shiftKey

中添加了试图隔离“@”字符的命令，但是由于

keyUp

事件，我的用户必须在“shift”键之前释放“@”键，否则，它无法通过条件

有没有办法：

• 使用单个条件隔离“@”字符
• 更改事件侦听器，以便键的顺序无关紧要。旧的

  keyPress

  方法可以满足我的需要

---

您可以检查

e.key

（而不是

e.keyCode

）中的

@'

您可以将与指令中的键代码一起使用：

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

---

对于未来的人们，以下是我最终要做的事情。Trix有一个名为“Trix change”的专有事件侦听器，它监视编辑器本身的任何更改。这让我们绕过了keyup v的问题。按下键

触发事件侦听器后，我可以查看最后键入的字符是否与触发器匹配，如果匹配，则初始化搜索。这是一种与键盘无关的方法，可以让我们绕过各种键盘代码问题

代码如下：

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
    }
})

如果用户提交了@v-on:keydown。@调用的函数Foo和函数Foo（inputInfo）收到了有关输入的所有信息，例如inputInfo.srcElement.selectionEnd、inputInfo.srcElement.value等。。。我们不需要为过滤@symbol编写任何if-s。v-on：按下键@ 它的means函数将仅用于提交@symbol。

---

不同的keybord布局如何？并非所有键盘布局中产生的

@

字符都相同。我觉得这种做法是徒劳的。最好在更改时检查

onChange

。您想要什么样的功能？ie类似于facebook，当你输入@一个名字列表时会弹出？我同意Sani的观点，你可能想考虑使用@ change和检查‘@’是否在StrueYP-中，我也想到过，但是对E.KEY的支持显得不均匀，特别是在Safari。不同的键盘布局如何？并非所有键盘布局中产生的

@

字符都相同。在英文布局中，这将起作用。但是在瑞典版式中，它不会这样做，因为与英语版相比，

Shift+2

（在瑞典版式中产生

“

），它是用

AltGr+2

（或

Ctrl+Alt+2

）生成的。这个问题会调用keycode

50

，所以我假设只有英语版式在范围内（可能这是唯一适用于预期用户群的布局）。请解释您的解决方案：更改是什么，为什么会解决问题？如果用户提交了@v-on:keydown。@调用函数Foo和函数Foo（inputInfo）已收到有关输入的所有信息，例如inputInfo.srcElement.selectionEnd、inputInfo.srcElement.value等。。。

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
    }
})

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