鼠标右键无法触发自定义的复制方法

Question

接到一个需求就是需要用户主动去复制一段数据，需要两种实现方法
1、用户点击复制按钮，将内容复制到粘贴板
2、用户右键点击要复制的内容区域，把内容复制到粘贴板
现在只实现了第一个，第二个遇到了问题，通过劫持用户右键点击的操作，去执行自定义的复制方法，方法体里面的代码也执行了但是不能将内容添加到粘贴板上。
各位大大，有知道原因的吗，请赐教，谢谢！
代码片段

<div id="box">
    <span id="text">这是要复制的内容</span>
    <button type="button" id="copyBtn">复制</button>  
</div>

function copyStr(str){
    var input = document.createElement('input')
    input.value = str
    document.body.appendChild(input)
    input.select()
    document.execCommand('Copy')
}
var oBtn = document.getElementById('copyBtn')
var oText = document.getElementById('text')
var copyText = document.getElementById('text').innerText
oBtn.addEventListener('click',function(){
    copyStr(copyText) // 这里可以把内容复制到粘贴板
},false)
oText.addEventListener('contextmenu',function(ev){
    ev.preventDefault()
    copyStr(copyText) // 在这里就不可以
},false)

Answer 1

把 span 改为 input 标签，并保证其 对用户可见，然后

    document.querySelector('#text').select();
    document.execCommand('Copy');

即可。