CODEWITHSUNDEEP
javascriptvue.js
mending3
mending3

Reputation: 712

VUE & JS: Disable all keyboard events except copy-paste (CTRL + C) on contenteditable element

how do I disable all keyboard events on a contenteditable element while allowing the content to be copy-pasted?

User should still see the mouse cursor

tried this doesn't work:

const inputEvt = (e) => {
      e.preventDefault();

      if (e.keyCode === 91 && e.keyCode === 67) {
        return true;
      }

      return false;
    };

reproduction: https://codesandbox.io/s/sweet-wiles-bx8oe

Upvotes: 1

Views: 1998

Answers (1)

tony19
tony19

Reputation: 138326

You could update inputEvt to check for ctrlKey or metaKey (on macOS, ⌘+C and ⌘+V are copy and paste respectively) along with C or V. Also move the e.preventDefault() to the else clause, or else the copy/paste action would be prevented:

const inputEvt = (e) => {
  if ((e.ctrlKey || e.metaKey) && (e.keyCode === 91 || e.keyCode === 67)) {
    return true;
  }

  e.preventDefault();
  return false;
};

demo

Alternatively, you could just use set readonly=true on the input element to avoid having to hook the keys:

<input readonly>

Upvotes: 1

Related Questions