【代码段1】是生效的
<p onclick="copyContent(this);" title="点击复制">这是值1~这是值1~这是值1~这是值1~这是值1~这是值1~</p>
<p onclick="copyContent(this);" title="点击复制">这是值2~这是值2~这是值2~这是值2~这是值2~这是值2~</p>
<p onclick="copyContent(this);" title="点击复制">这是值3~这是值3~这是值3~这是值3~这是值3~这是值3~</p>
<p onclick="copyContent(this);" title="点击复制">这是值4~这是值4~这是值4~这是值4~这是值4~这是值4~</p>
<input id="copy_content" type="text" value="" style="position: absolute;top: 0;left: 0;opacity: 0;z-index: -10;"/>
<script type="text/javascript">
function copyContent(ElementObj){
//获取点击的值
var clickContent = ElementObj.innerText;
//获取要赋值的input的元素
var inputElement = document.getElementById("copy_content");
//给input框赋值
inputElement.value = clickContent;
//选中input框的内容
inputElement.select();
// 执行浏览器复制命令
document.execCommand("Copy");
}
</script>
【代码段2】是无效的~怎么改为生效的jquery方式呢?
<span onclick="copyContent(this);" value="这是值1~这是值1~这是值1~这是值1~这是值1~这是值1~" class="cur">复制</span>
<span onclick="copyContent(this);" value="这是值2~这是值2~这是值2~这是值2~这是值2~这是值2~" class="cur">复制</span>
<span onclick="copyContent(this);" value="这是值3~这是值3~这是值3~这是值3~这是值3~这是值3~" class="cur">复制</span>
<span onclick="copyContent(this);" value="这是值4~这是值4~这是值4~这是值4~这是值4~这是值4~" class="cur">复制</span>
<input id="copy_content" type="text" value="" style="position: absolute;top: 0;left: 0;opacity: 0;z-index: -10;"/>
<script type="text/javascript">
function copyContent(ElementObj){
//获取点击的值
var clickContent = ElementObj.value;
//获取要赋值的input的元素
var inputElement = document.getElementById("copy_content");
//给input框赋值
inputElement.value = clickContent;
//选中input框的内容
inputElement.select();
// 执行浏览器复制命令
document.execCommand("Copy");
}
</script>
把这句代码更换一下就好了
//获取点击的值
var clickContent = ElementObj.getAttribute("value")
jquery实现方式:
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">
function copyContent(ElementObj) {
var oInput = document.createElement('input');
oInput.value = $(ElementObj).attr("value")
document.body.appendChild(oInput);
oInput.select(); // 选择对象
document.execCommand("Copy"); // 执行浏览器复制命令
oInput.className = 'oInput';
oInput.style.display = 'none';
alert('复制成功')
}
</script>