按下 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