@ments 기능을 위해 keyUp에서 "@" 문자 분리

@ments 기능을 위해 keyUp에서 "@" 문자 분리

나는 부에와 바닐라 JS를 이용하여 기본적인 @mention 시스템을 구축하고 있지만, 구체적으로 "@" 문자를 분리하기 위해 애쓰고 있다.

내 템플릿:

<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방법은 내가 필요한 걸 할 수 있지만 그건 더 이상 사용되지 않아

미래의 사람들을 위해, 이것이 내가 결국 하게 된 것이다.트릭스는 편집자 자체에 대한 어떤 변화도 주시하는 "트릭스 체인지"라고 불리는 독점적인 이벤트 청취기를 가지고 있다.이것은 우리에게 키업 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
    }
})

확인할 수 있다.e.key(의 경우)e.keyCode~을 위해'@'

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

지시어의 키코드와 함께 수식어를 사용할 수 있다.

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

<input v-on:keydown.@="functionFoo" @ v-on:keydown.@라고 불리는 함수 Foo와 함수Foo(inputInfo)가 입력에 대한 모든 정보(예: inputInfo.srcElement)를 수신한 경우.selectionEnd, inputInfo.srcElement.value 등 ...우리는 @ 기호 필터링에 대해 ifs를 쓸 필요가 없다. v-on:keydown.@ 평균 함수는 @ 기호만 제출하면 식을 것이다.여기에 링크 설명을 입력하십시오.

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

그리고 당신의 JS기능은

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

참조URL: https://stackoverflow.com/questions/54564617/isolate-character-on-keyup-for-mentions-functionality