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

模拟键盘事件在Vuejs中的textarea上不起作用

1 个答案: