如何处理HTML文档和剪贴板

使用带有Windows 剪贴板的CF_HTML Clipboard Format的确容易让人搞胡涂，一部分是因为它不是clipboard format中自带的剪贴板；它是一个注册格式（registered format），所以不是一个常量，因为它的值会因为系统的不同而产生变化。你可以通过一个简单的API调用 -- RegisterClipboardFormat来获得一个注册剪贴板格式的值。这个函数的首次调用会通过一个给定的字符串来执行，它返回一个范围在C000-FFFF之间的唯一值。每一个在系统上处理的后续调用（subsequent call）会返回同样的值。用于这种格式中的关键字符串就是“HTML Format”：

你必须首先构建一个描述性的header，并在将HTML数据放入剪贴板之前先把它放到数据中。这个header会给其他程序提供描述版本信息、HTML起始数据的偏移量（offset），以及有关实际选择范围（actual selection）起始地方的信息。用户可能会选择的HTML文档的一部分甚至只是一个元素（比如一个table中的几行）作为一个选择区域。页面的其他部分，比如内联样式定义（inline style definitions）则可能会被要求进行完全渲染（render）。你不仅需要将最初所选择的HTML区域放入剪贴板，而且还需要放入一个header，它看起来就像是这样：

Version:1.0

StartHTML:000000258

EndHTML:000001491

StartFragment:000001172

EndFragment:000001411

应应用程序通过StartFragment和EndFragment属性来决定哪些数据需要粘贴，这些数据或许会（也可能不会）用剩下的HTML对所选择的部分进行格式安排。你必须将HTML注释放入数据中以便将来对所选部分进行识别。很明显，你必须在构建最后的header之前完成它，否则偏移量会有变化。一个用于所选数据的opening/closing注释标签分别是“<!--StartFragment-->”和“<!--EndFragment-->”

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

首先加载本地clipboard.js文件；

然后就是在body中加上要复制或剪切的文本域内容以及按钮；

使用了HTML5的data-属性，用来定位复制对象目标，它指向了文本域#foo，说明复制的是#foo中的value内容，aria-label属性定义了复制成功后的信息，用来提示复制结果信息。

---