你必须首先构建一个描述性的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-->”
首先加载本地clipboard.js文件;
然后就是在body中加上要复制或剪切的文本域内容以及按钮;
使用了HTML5的data-属性,用来定位复制对象目标,它指向了文本域#foo,说明复制的是#foo中的value内容,aria-label属性定义了复制成功后的信息,用来提示复制结果信息。