javascript - 按下 CTRL-C 和 CTRL-V 时更改文本颜色

Question

我想在单击 CTRL-C 和 CTRL-V 时更改 html 文本的文本。我有这段代码可以在单击 CTRL-C 时更改文本，但是当我复制其他文本时，以前的文本不会变回其原始颜色。我怎样才能做到这一点？

$(document).ready(function() {
  var ctrlDown = false,
    ctrlKey = 17,
    cmdKey = 91,
    vKey = 86,
    cKey = 67;

  $(document).keydown(function(e) {
    if (e.keyCode == ctrlKey || e.keyCode == cmdKey) ctrlDown = true;
  }).keyup(function(e) {
    if (e.keyCode == ctrlKey || e.keyCode == cmdKey) ctrlDown = false;
  });

  // Document Ctrl + C/V 
  $(document).keydown(function(e) {
    var clip = document.getElementById("clipBoard");
    if (ctrlDown && (e.keyCode == cKey)) {
      navigator.clipboard.readText()
        .then(text => {
          clip.value = text;

          var sel = window.getSelection();
          var range = 0;
          if (sel.rangeCount && sel.getRangeAt) {
            range = sel.getRangeAt(0);
          }
          // Set design mode to on
          document.designMode = "on";
          if (range) {
            sel.removeAllRanges();
            sel.addRange(range);
          }
          // Colorize text
          document.execCommand("ForeColor", false, "red");
          // Set design mode to off
          document.designMode = "off";
        })
        .catch(err => {

        });
      console.log("Document catch Ctrl+C");
    }
    if (ctrlDown && (e.keyCode == vKey)) {
      console.log("Document catch Ctrl+V");
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Enter text here and copy</p>
<span id="content" contenteditable>Test words to copy and paste</span>
<br>
<br>
<p>This is the text in the clipboard</p>
<textarea id="clipBoard" readonly></textarea>

这是 jsfiddle的代码。它只适用于 Chrome(剪贴板权限)

谢谢!

Answer 1

您可以选择在每次应用新颜色之前重置颜色。请参阅下面的代码段:

$(document).ready(function() {
  var ctrlDown = false,
    ctrlKey = 17,
    cmdKey = 91,
    vKey = 86,
    cKey = 67;

  $(document).keydown(function(e) {
    if (e.keyCode == ctrlKey || e.keyCode == cmdKey) ctrlDown = true;
  }).keyup(function(e) {
    if (e.keyCode == ctrlKey || e.keyCode == cmdKey) ctrlDown = false;
  });

  // Document Ctrl + C/V 
  $(document).keydown(function(e) {
    var clip = document.getElementById("clipBoard");
    if (ctrlDown && (e.keyCode == cKey)) {
      navigator.clipboard.readText()
        .then(text => {
          clip.value = text;

          var sel = window.getSelection();
          var range = 0;
          if (sel.rangeCount && sel.getRangeAt) {
            range = sel.getRangeAt(0);
          }
          // Set design mode to on
          document.designMode = "on";
          if (range) {
            sel.removeAllRanges();
            sel.addRange(range);
          }
          //reset all custom color edits
          $('font').removeAttr('color');
          // Colorize text
          document.execCommand("ForeColor", false, "red");
          // Set design mode to off
          document.designMode = "off";
        })
        .catch(err => {

        });
      console.log("Document catch Ctrl+C");
    }
    if (ctrlDown && (e.keyCode == vKey)) {
      console.log("Document catch Ctrl+V");
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Enter text here and copy</p>
<span id="content" contenteditable>Test words to copy and paste</span>
<br>
<br>
<p>This is the text in the clipboard</p>
<textarea id="clipBoard" readonly></textarea>

注意:仅测试 Chrome 78