JS复制内容到剪贴板

项目要实现复制内容到剪贴板,想到使用JS实现,刚开始使用window.clipboardData,但是window.clipboardData只有IE能够实现剪贴,其他浏览器不行。

后面试过试用js插件——ZeroClipboard,据说兼容各大浏览器,但是由于自己使用的前端框架问题,标签不能使用这个的标签,后来就使用了execCommand来实现这个功能,兼容性和注意问题如下,

 


/**
 * 复制文本到剪贴板
 */
function copyToClipBoard(){
	var text= "Hello World....";//复制的内容
    /**如果内容是界面的一个元素,可以直接读取元素getElementById()
       这里是因为界面没有input元素,所以自己创建一个元素来作为载体把内容复制到剪贴板
    **/
	var inputEle = document.createElement("input");//创建一个input元素
	//判断并控制整个HTML文档可编辑
	if(!(document.designMode == "on")){
		document.designMode = "on";
	}
	inputEle.value = text;//把复制的内容赋给input的内容
	document.body.appendChild(inputEle);//把input元素绑定到document,不然操作不到
    // 判断元素是否能被选中
    if (inputEle&&inputEle.select) {
      // 选择文本
	  // inputEle.focus(); 
	  inputEle.select(); //或: inputEle.setSelectionRange(0, inputEle.value.length);
      try {
        // 复制文本
       document.execCommand('copy');
      } catch (err) {
        alert('由于浏览器安全设置,不支持复制功能!!!');
      }
      inputEle.blur();//失去焦点
      inputEle.style.display="none";//隐藏元素
      document.body.removeChild(inputEle);//删除元素
      document.designMode = "off";//文档设为不可编辑,否则界面的其他元素可能被影响
      alert('复制成功');
    }

}

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值