Изолируйте символ "@" в keyUp для функциональности @mentions - PullRequest
Новая
       28

Изолируйте символ "@" в keyUp для функциональности @mentions

0 голосов
/ 07 февраля 2019

Я строю базовую систему @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 будет делать то, что мне нужно, , но это устарело .

Ответы [ 3 ]

0 голосов
/ 07 февраля 2019

Вы можете использовать модификатор .shift вместе с кодом ключа в директиве: 

<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>
0 голосов
/ 09 февраля 2019

Для будущих людей, вот что я в итоге сделал.Trix имеет проприетарный приемник событий, называемый «trix-change», который отслеживает изменение any в самом редакторе.Это помогает нам разобраться в проблемах с 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
    }
})
0 голосов
/ 07 февраля 2019

Вы можете проверить e.key (вместо e.keyCode) для '@'

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

...