模拟键盘事件在 Vuejs 中的文本区域不起作用

Question

我正在尝试在用作终端的文本区域中模拟键盘事件，更具体地说是箭头事件。我单独处理键盘事件以重现真实终端中会发生什么。

我尝试了几种在网上找到的方法，但似乎都不适合我的情况。

.HTML

<textarea
   id="terminal"
   autocorrect="off"
   spellcheck="false"
   @click.prevent
   @keydown.prevent="handleKey"
></textarea>

.JS

<script>
export default {
  methods: {
    handleKey(event) {
      // some checks on other keyboard events...
      if (event.keyCode === 37 || event.keyCode === 39) {
        const element = document.getElementById('terminal')
        this.fireKey(element, event.key)
      }
      // Checks continue...
    }
    fireKey(element, key) {
      if (!element) {
        return
      }
      const keydown = document.createEvent('Events')
      keydown.initEvent('keydown', true, true)
      keydown.keyCode = keydown.which = key
      element.dispatchEvent(keydown)
      var keyup = document.createEvent('Events')
      keyup.initEvent('keyup', true, true)
      keyup.keyCode = keyup.which = key
      console.info(keyup)
      element.dispatchEvent(keyup)
    },
  }
}
</script>

我也试过

element.dispatchEvent(new KeyboardEvent('keydown', { key }))
element.dispatchEvent(new KeyboardEvent('keyup', { key }))

相反document.createEvent但它也没有用。

我希望事件被触发，但什么也没发生。

Answer 1

只需更改

<textarea
   id="terminal"
   autocorrect="off"
   spellcheck="false"
   @click.prevent
   @keydown.prevent="handleKey"
></textarea>

到下面。 所以你不会阻止输入，否则你将不得不手动处理它

<textarea
   id="terminal"
   autocorrect="off"
   spellcheck="false"
   @click.prevent
   @keydown="handleKey"
></textarea>

并在事件处理程序中通过调用阻止它(停止传播(。在这种情况下

handleKey(event) {
...
event.stopPropagation()
}