时间戳

首页 > 解决方案 > VUE 和 JS：在 contenteditable 元素上禁用除复制粘贴 (CTRL + C) 之外的所有键盘事件

javascript - VUE 和 JS：在 contenteditable 元素上禁用除复制粘贴 (CTRL + C) 之外的所有键盘事件

问题描述

如何contenteditable在允许复制粘贴内容的同时禁用元素上的所有键盘事件？

用户仍应看到鼠标光标

试过这个不起作用：

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

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

      return false;
    };

复制：https ://codesandbox.io/s/sweet-wiles-bx8oe

标签： javascriptvue.js

解决方案

您可以更新inputEvt以检查ctrlKey或metaKey（在 macOS 上，⌘</kbd>+C and ⌘</kbd>+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;
};

演示

或者，您可以只readonly=true在input元素上使用 set 以避免挂钩键：

<input readonly>

推荐阅读