如何用js实现复制功能?

<script type="text/javascript">
	window.onload=function(){
		$('#url').attr('value',window.location.href);
	}
	function copyUrl() {
		var url = document.getElementById("url").value;
		window.clipboardData.setData("Text", url);
	}
</script>
<button class="btn"onClick="url.select();document.execCommand('Copy')">分享</button>	
<input style="opacity: 0;height: 0px !important;" type="text" size="" id="url" value="">
在不使用Clipboard API的情况下实现复制功能,可以采取一些间接的方法。以下是一个可能的解决方案: 1. 使用JavaScript动态创建一个隐藏的`<textarea>`元素,并将需要复制的文本设置为该元素的值。 2. 然后,将这个`<textarea>`元素选中,并使用`document.execCommand('copy')`来执行复制操作。这个命令会将选中的内容复制到剪贴板。 3. 最后,将这个临时创建的`<textarea>`元素从文档中移除,以清理DOM。 这种方法的关键在于`document.execCommand`在许多现代浏览器中已经被弃用,因此这种方法可能不适用于所有环境,特别是在一些新的浏览器版本中可能不再有效。 示例代码如下: ```javascript function copyTextToClipboard(text) { // 创建一个临时的textarea元素用于存放文本 const copyFrom = document.createElement("textarea"); copyFrom.textContent = text; // 把这个临时元素添加到文档的body中 document.body.appendChild(copyFrom); // 选中文本 const selectedText = document.getSelection(); selectedText.removeAllRanges(); copyFrom.select(); selectedText.addRange(document.createRange()); try { // 尝试执行复制操作 const successful = document.execCommand('copy'); const msg = successful ? 'successful' : 'unsuccessful'; console.log('Copying text command was ' + msg); } catch (err) { console.log('Oops, unable to copy'); } // 清理临时元素 document.body.removeChild(copyFrom); } // 使用函数 copyTextToClipboard('要复制的文本'); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值