Question

我正在尝试使用一些示例代码为用户显示div。我希望他们能够在div中选择并使用Ctrl + A来选择所有示例代码，但我不希望他们能够编辑实际文本（以免在事故中删除一点然后它不行。）

我现在通过div上的contenteditable set实现了这个目标，但是如何在实际的文本编辑中获得该属性的相同功能呢？

编辑：查看@Mr. Llama的comment中链接的解决方案，我可以使用此方法来实现我正在寻找的主要功能。但是，如果可能的话，我想简单地允许我的用户熟悉的Ctrl + A命令，并且仍然允许手动突出显示div文本的片段。同样，同时禁止添加或删除任何文本。

Answer 1

当我阻止onkeydown，oncut和onpaste事件时，似乎为我工作。

for (const elm of document.getElementsByClassName('editable-not-editable')) {
  elm.setAttribute('contenteditable', true);
  elm.spellcheck = false;
  elm.oncut = () => false;
  elm.onpaste = () => false;
  elm.onkeydown = (event) => {
    if (event.metaKey || event.ctrlKey) {
      return;
    }
    event.preventDefault();
  }
}

<div class="editable-not-editable">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor 
  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
  exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
  irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
  pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia 
  deserunt mollit anim id est laborum.
</div>

如何实现可信属性的Ctrl + A功能？

1 个答案: