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

I have the following code

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

and i listen for the keyup event. I need the cursor not to move when I press up or down.

I tried to do the following but it didn't work for me as the cursor moved anyway

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


Solution 1:[1]

Use preventDefault on the keydown event instead of 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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 cam

Related Questions