如何用js实现点击复制文本功能兼容版

今天遇到个功能，当我点击某按钮或者相应操作时，就复制相应文本。下面先看看页面视图：

如上图所见，当我点击复制时，复制前面的文本。下面看代码实现：(我想各位要看的是功能，所以样式我就不给了哈。)

 

HTML：

<div class="underline_input" id="date01">啊啊啊啊啊啊</div>
<a href="javascript:" class="copy-btn" onclick="copay($(this))" copay_text="#date01">
复制
</a>
<input class="underline_input" type="text" id="date02" placeholder="选择时间" />
<a href="javascript:" class="copy-btn" onclick="copay($(this))" copay_text="#date02">
复制
</a>

function copay(dom){
	/* dom是我们点击时传进来的元素(就是我们点击的那个按钮) */
				
	/* 首先获取我们在html里的自定义属性
	    (我这里有用到jQuery,当然你不用也可以,只是代码有点繁琐),
		里面装的是我们要进行复制的对象id */
	var copyBtn = dom.attr("copay_text");
				
    /* 然后我们自己创建一个input框(这里值得注意,我们的浏览器copy操作不能对输入框以外的元素进行js复制,
	所以为了兼容需要一个输入框) */
	var thisIsCopy = document.createElement('input');
				
	//设置创建的输入框类型(这里我们完全可以用jQuery的方式,这里为了更直观些,所以没有用)
	thisIsCopy.setAttribute("type","text");
				
	//然后给创建的输入框赋值(以下是兼容写法,当我们要复制的对象是非输入框时,我们就复制它的文本内容)
	thisIsCopy.value = $(copyBtn).val() ? $(copyBtn).val() : $(copyBtn).text();
	thisIsCopy.setAttribute("value",thisIsCopy.value);
				
	//然后给我们的输入框添加一个唯一标识,方便我们去找
	thisIsCopy.setAttribute("id","CopyBox");
				
	//然后就是把我们创建的元素放入dom树中(这里要注意,浏览器是去读取我们的Dom树进行复制的,如果他没找到将无法进行复制)
	//为防止我们页面有多个复制操作,所以在追加到Dom树之前我们先进行移除操作
	$("#CopyBox").remove();
				
	//这里再追加进去
	$("body").append(thisIsCopy);
				
	//为防止我们创建的元素影响页面美观，我们给他设置一下样式,将它藏起来
				$("#CopyBox").css({"height":1,"width":1,"opacity":0,"position":"absolute","top":-100,});
				
	//这里是选中内容
	thisIsCopy.select();
				
	//然后是复制操作
	document.execCommand("copy");

//最后就是调用了,他每点击一次调用一次		
}

注意：要复制的ID和属性copy_text一定要对应(希望对搜到的同学有所帮助)