在文本区域中按下按键时如何防止正常的光标行为

Question

我有以下代码

 textarea#main-text-area(
        rows="1"
        ref="textArea"
        maxlength="4096"
        v-model="message"
        :placeholder="placeholder"
        @keyup="onTextAreaKeyUp"  
        @change="onChangeMessage"
        :class="{ 'vars-error': varsError }"
        v-click-outside="onTextAreaBlur"
      )

然后我监听 keyup 事件。我需要按上或下时光标不移动

我尝试执行以下操作，但它对我不起作用，因为光标无论如何都在移动

onTextAreaKeyUp(e) {
      if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
        e.preventDefault();
      }
    }

Answer 1

在 keydown 事件上使用 preventDefault 而不是 keyup。

document.querySelector('textarea').addEventListener('keydown', e => {
  if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
    e.preventDefault()
  }
})

<textarea>Hello, World! Hello, World! Hello, World! Hello, World! </textarea>

在文本区域中按下按键时如何防止正常的光标行为

How to prevent normal cursor behavior when pressing keys in a textarea

html

javascript

vue.js

pug