html怎么实现按钮复制内容，如下图

html-css011

html怎么实现按钮复制内容，如下图,第1张

下面代码是原生态复制，只适合ie内核的浏览。

<script type="text/javascript">

    function copyText() {      var text = document.getElementById("text").innerText      var input = document.getElementById("input")

      input.value = text // 修改文本框的内容

      input.select() // 选中文本

      document.execCommand("copy") // 执行浏览器复制命令

      alert("复制成功")

    }  </script>

    <div class="wrapper">

   <p id="text">我把你当兄弟你却想着复制我？</p>

   <textarea id="input">这是幕后黑手</textarea>

   <button onclick="copyText()">copy</button>

</div>

/1、网页代码如下：

<script language=javascript>

   // 自动 COPY 代码开始

   function MM_findObj(n, d) { //v4.0

   var p,i,x if(!d) d=document if((p=n.indexOf("?"))>0&&parent.frames.length) {

   d=parent.frames[n.substring(p+1)].document n=n.substring(0,p)}

   if(!(x=d[n])&&d.all) x=d.all[n] for (i=0!x&&i<d.forms.lengthi++) x=d.forms[n]

   for(i=0!x&&d.layers&&i<d.layers.lengthi++) x=MM_findObj(n,d.layers.document)

   if(!x && document.getElementById) x=document.getElementById(n) return x

   }

   function JM_cc(ob){

   var obj=MM_findObj(ob) if (obj) {

   obj.select()js=obj.createTextRange()js.execCommand("Copy")}

   alert("复制成功！您可以将本页推荐给您QQ或者论坛上的朋友阅读！")

   }

   

   // 自动 COPY 代码结束

   document.write('<br><b><font color=red style=font-size:14px>点击复制推荐给您的朋友阅读：</font></b><input name="page_url" value="'+window.location.href+'" size="64" style=color:red value="点击复制地址给您的朋友阅读" onClick=JM_cc("page_url")>')

   </script>

2、复制的HTML代码的话，可以在代码前加上<span>，在代码后加上</span>。例：<span>这里是你复制的内容！！</span>。

js导入

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>

<script type="text/javascript" src="js/jquery.zclip.min.js"></script>

！上面缺少的文件可以在网上搜索查找。

2.代码

<div class="copybox clearfix">

<div class="copybox-n1 clearfix">

<div style="width:232pxfloat:leftheight:36pxoverflow:hiddenzoom:1">

<input type="text" id="mytxt1" value="点击右侧复制按钮复制" class="n1input">

</div>

<div style="width: 48pxheight: 36pxposition: absolutemargin-left: 232px*margin-left:0px_margin-left: 0">

<button id="copy_input1" class="n1-btn">复制</button>

</div>

</div>

<div class="copybox-n2 clearfix">

<div style="width:232pxfloat:leftheight:36pxoverflow:hiddenzoom:1">

<input type="text" id="mytxt2" value="点击右侧复制按钮复制" class="n1input">

</div>

<div style="width: 48pxheight: 36pxposition: absolutemargin-left: 232px*margin-left:0px_margin-left:0">

<button id="copy_input2" class="n1-btn">复制</button>

</div>

</div>

</div>

<script type="text/javascript">

$(function() {

/*复制*/

$('#copy_input1').zclip( {

path : 'js/ZeroClipboard.swf',

copy : function() {return $('#mytxt1').val()/*复制内容*/},

afterCopy : function() {alert("复制成功")/*复制成功*/}

})

/*复制*/

$('#copy_input2').zclip( {

path : 'js/ZeroClipboard.swf',

copy : function() {return $('#mytxt2').val()/*复制内容*/},

afterCopy : function() {alert("复制成功")/*复制成功*/}

})

})

</script>

3.参考资料

http://www.w3cfuns.com/blog-5458304-5403309.html