按下CTRL-C和CTRL-V时更改文本的颜色 [英] Change colour of text when CTRL-C and CTRL-V are pressed

问题描述

我想在单击CTRL-C和CTRL-V时更改html文本的文本.我有这段代码可以在单击CTRL-C时更改文本，但是当我复制其他文本时，以前的文本不会更改回其原始颜色.我该如何实现?

I want change text of html text when CTRL-C and CTRL-V are clicked. I have this code that changes the text when CTRL-C is clicked but when I copy other text, the previous text doesn't change back to its original colour. How can I achieve this?

$(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(剪贴板权限)中可用

Here is the jsfiddle of the code. It will only work in Chrome (clipboard permissions)

谢谢！

推荐答案

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

You can opt to reset the color, each time before applying the new color. See snippet below:

$(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

Note: Tested only Chrome 78

这篇关于按下CTRL-C和CTRL-V时更改文本的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！