zoukankan      html  css  js  c++  java
  • js复制内容到剪切板,兼容pc和手机端,支持Safari浏览器

    最近,一些项目中用到监听用户复制。剪切的操作。

    Javascript原生有一些事件:copy、paste、cut,

    这些事件可以作用的目标元素:

       能获得焦点的元素 (如contentEditable内容能编辑或者可以选中的元素),或者是<body>

     1         <div id="cardList">
     2             <div class="btn">点击我,复制我</div>
     3         </div>
     4         
     5         
     6         
     7         <script type="text/javascript">
     8             
     9             function copy(str){
    10                 var save = function (e){
    11                     e.clipboardData.setData('text/plain',str);//下面会说到clipboardData对象
    12                     e.preventDefault();//阻止默认行为
    13                 }
    14                 document.addEventListener('copy',save);
    15                 document.execCommand("copy");//使文档处于可编辑状态,否则无效
    16             }
    17                     
    18             document.getElementById('cardList').addEventListener('click',function(ev){
    19                  copy(ev.target.innerText)
    20             })
    21                 
    22         </script>

    使用jQuery中的方法监听用户的剪切、复制、粘贴的行为:

    1 $("#cut").on("cut",function(){
    2    alert("剪切");
    3 });
    4 $("#copy").on("copy",function(){
    5    alert("复制");
    6 });
    7 $("#paste").on("paste",function(){
    8    alert("粘贴");
    9 });

    这些行为包括使用键盘的ctrl + c操作,或者右击鼠标—>复制等操作。

    Evevt.clipboardData 对象

    clipboardData是JavaScript剪切板对象,该对象提供了3个常用方法:

      clearData():  clipboardData对象从剪切板删除一种或多种数据格式(一个参数:数据类型)

      getData():  clipboardData对象从剪切板获取指定格式的数据(一个参数:数据类型)

      setData():  clipboardData对象赋予指定格式的数据(两个参数:数据类型,要赋予的值)

      *数据类型一般为“"text/plain" ”

    Evevt.clipboardData 对象兼容性问题

      经过尝试,clipboardData对象内兼容大部分px浏览器,像chrome,firefox、ie等,但是在手机端兼容性不是很好,

      目前clipboardData在ios上的safari浏览器无效,为解决移动端这个问题,我们引用一个js插件——clipboard.js

      clipboard.js依赖于HTML5推出的Selection API和execCommand API

      使用:

      在页面中引入

    1 <script src="clipboard.min.js"></script>

      使用clipboard.js的自定义属性

     1      <!--使用data-clipboard-target属性指定被复制的标签-->
     2         <!--使用data-clipboard-action属性指定一些操作,copy(复制),cut(剪切)-->
     3         <!--注意:cut 操作仅适用于<textarea>和<input>-->
     4         <div style="margin:2em">
     5             <textarea id="id_text"></textarea>
     6             <button type="button" id="id_copy"
     7                     data-clipboard-target="#id_text"
     8                     data-clipboard-action="copy">点击复制
     9             </button>
    10         </div>

      

    1    var clipboard = new Clipboard("#id_copy");
    2         clipboard.on("success",function (element) {//复制成功的回调
    3             console.info("复制成功,复制内容:    " + element.text);
    4         });
    5         clipboard.on("error",function (element) {//复制失败的回调
    6             console.info(element);
    7         })
    8     });

      高级用法

    1    //清理Clipboard对象
    2     var clipboard = new Clipboard('.btn');
    3     clipboard.destroy();
  • 相关阅读:
    poj 1634
    poj 2153
    POJ 1693
    poj 1789
    POJ 2676
    vue 路由
    用 node.js 创建第一个Hello World
    js原生Ajax 的封装和原理
    BFC原理
    怎么理解js的面向对象编程
  • 原文地址:https://www.cnblogs.com/exhuasted/p/7093104.html
Copyright © 2011-2022 走看看