Изолировать символ «@» в keyUp для функциональности @mentions
Я создаю базовую систему @mention, используя Vue и Vanilla JS, но изо всех сил пытаюсь изолировать символ «@».
В моем шаблоне:
<trix-editor
ref = "trix"
@keyup = "listenForUser"
></trix-editor>
И в моем JS:
listenForUser(e) {
if (e.keyCode == 50 && e.shiftKey == true) {
// do stuff
}
}
Изначально я слушал только e.keyCode == 50, но «50» соответствует как «@», так и «2», так что я непреднамеренно вызвал упоминание.
Я добавил в e.shiftKey, чтобы попытаться изолировать символ «@», но из-за события keyUp мой пользователь должен отпустить клавишу «@» перед клавишей «shift», иначе он не пройдет условное .
Есть ли способ:
- Изолируйте символ «@», используя одно условие
- Измените прослушиватель событий, чтобы порядок ключей не имел значения. Старый метод
keyPressсделает то, что мне нужно, но это устарело.
какой функционал вам нужен? т.е. похоже на facebook, где при вводе @ появляется список имен? Я согласен с Сани, возможно, вы захотите использовать @change и проверить, есть ли в строке «@»
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
Вы можете проверить e.key (вместо e.keyCode) для '@'
https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key
Да, я тоже об этом думал, но поддержка e.key кажется неравномерной, особенно в Safari.
Вы можете использовать .shift модификатор вместе с кодом ключа в директиве:
<trix-editor @keyup.shift.50 = "listenForUser" />
new Vue({
el: '#app',
methods: {
mention() {
console.info('mention')
}
}
})<script src = "https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<div id = "app">
<input type = "text" @keyup.shift.50 = "mention">
</div>А как насчет разных раскладок клавиатуры? Символ @ воспроизводится не во всех раскладках клавиатуры. В английской раскладке это будет работать. Но в шведской раскладке этого не будет, поскольку @ производится с AltGr + 2 (или Ctrl + Alt + 2) по сравнению с английским Shift + 2 (который в шведской раскладке производит ").
Вопрос вызывает ключевой код 50, поэтому я предполагаю, что в сферу действия входит только английская раскладка (возможно, это единственная раскладка, которая применяется для предполагаемой пользовательской базы).
Для будущих людей, вот что я в итоге сделал. У Trix есть проприетарный прослушиватель событий под названием «trix-change», который следит за изменением любой в самом редакторе. Это помогает нам обойти проблемы с keyup и 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
}
})
<input v-on:keydown.@="functionFoo"> если пользователь отправил @v-on:keydown.@ вызванную функцию Foo и functionsFoo(inputInfo) получил всю информацию о вводе, например inputInfo.srcElement.selectionEnd, inputInfo. srcElement.value и т. д. нам не нужно писать никаких if-s для фильтрации символа @. v-на:нажатие клавиши.@ Это означает, что функция будет работать только при отправке символа @. введите сюда описание ссылки
<trix-editor ref = "trix" @keydown.@ = "functionFoo"></trix-editor>
и ваша функция JS
functionFoo = (inputInfo) => { // todo ... }
Пожалуйста, объясните свое решение: в чем заключается изменение и почему оно устраняет проблему?
<input v-on:keydown.@ = "functionFoo"> если пользователь отправил @v-on:keydown.@ вызванную функцию Foo и functionsFoo(inputInfo) получил всю информацию о вводе, например inputInfo.srcElement.selectionEnd, inputInfo. srcElement.value и т.д...
А как насчет разных раскладок клавиатуры? Символ
@воспроизводится не во всех раскладках клавиатуры. Я считаю этот подход бесперспективным. Вместо этого лучше проверитьonChange.