Javascript 使用oncopy和onpaste更改颜色_Javascript_Html

Javascript 使用oncopy和onpaste更改颜色

javascript html

Javascript 使用oncopy和onpaste更改颜色,javascript,html,Javascript,Html,我想使用contentededitable并使用oncopy和onpaste功能来更改文本的颜色。从contentedittable复制文本时，我希望文本为红色，如果粘贴了文本，则我希望将文本颜色更改为绿色。这是可以实现的吗？我怎样才能做到 HTML: 复制声音粘贴声音在此处输入文本并复制测试要复制和粘贴的单词这是剪贴板中的文本函数playCopy（）{ document.getElementById（'copy'）.play（）； } 函数playPaste（）{ docume

我想使用

contentededitable

并使用

oncopy

和

onpaste

功能来更改文本的颜色。从

contentedittable

复制文本时，我希望文本为红色，如果粘贴了文本，则我希望将文本颜色更改为绿色。这是可以实现的吗？我怎样才能做到

HTML:


复制声音
粘贴声音
在此处输入文本并复制
测试要复制和粘贴的单词




这是剪贴板中的文本
函数playCopy（）{
document.getElementById（'copy'）.play（）；
}
函数playPaste（）{
document.getElementById（'paste'）.play（）；
}
函数副本（）{
}
函数粘贴（）{
}

不是最好的代码，但我希望它能给你一点动力，让你继续前进。粘贴颜色也可能有点问题，因为粘贴内容时先执行函数

paste（）

，然后再粘贴内容。我将编辑这个答案，一旦我得到一个更好的解决方案


.红色{
颜色：红色；
}
.绿色{
颜色：绿色；
}
复制声音
粘贴声音
在此处输入文本并复制
测试要复制和粘贴的单词




这是剪贴板中的文本
函数playCopy（）{
document.getElementById（'copy'）.play（）；
}
函数playPaste（）{
document.getElementById（'paste'）.play（）；
}
函数副本（）{
document.getElementById（'content'）.classList.remove（'color-green'）；
document.getElementById（'content'）.classList.add（'color-red'）；
}
函数粘贴（）{
document.getElementById（'content'）.classList.remove（'color-red'）；
document.getElementById（'content'）.classList.add（'color-green'）；
}

<html>

  <head>
    <audio id="copy" src="https://www.soundjay.com/button/sounds/beep-21.mp3" preload="auto"></audio>
    <audio id="paste" src="https://www.soundjay.com/button/sounds/beep-22.mp3" preload="auto"></audio>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  </head>

  <body>
    <button onclick="playCopy()">Copy Sound</button>
    <button onclick="playPaste()">Paste Sound</button>
    <p>Enter text here and copy</p>
    <span id="content"  oncopy="copy()" onpaste="paste()" contenteditable>Test words to copy and paste</span>
    <br>
    <br>
    <p>This is the text in the clipboard</p>
    <textarea id="clipBoard" readonly></textarea>
  </body>

</html>

<script>
function playCopy() {
    document.getElementById('copy').play();
}
function playPaste() {
    document.getElementById('paste').play();
}
function copy(){

}

function paste(){

}
</script>