zoukankan      html  css  js  c++  java
  • JS实现文本复制与剪切

    我们在网页上放置一个复制按钮,主要用来方便用户复制链接之类的复杂文本,以往的做法是,通过JS依靠Flash,甚至借助jQuery庞大的js库来实现文本复制到剪贴板的。今天我要给大家介绍的是一款极现代的,不需要flash,不依赖任何其他js库的非常小的插件,它叫clipboard.js。

    HTML

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

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

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

    <input id="foo" value="http://www.helloweba.com/demo/clipboard/"
    <button class="btn" data-clipboard-target="#foo" aria-label="复制成功!">复制</button> 

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

    还有个属性data-clipboard-action,它定义当前操作是复制还是剪切,默认是复制,当data-clipboard-action="cut",这时,点击按钮将会剪切文本,跟WORD操作一样。当然,剪切操作仅适用于text和textarea。

    我们也可以不需要input和textarea等元素内容作为复制对象,我们可以将要复制的内容通过ata-clipboard-text属性定义在按钮上,点击按钮就可以复制到ata-clipboard-text对应的内容。

    <button class="btn" data-clipboard-text="这里是要复制的内容" aria-label="复制成功!">复制</button> 

    Javascript

    将以下一句代码加入到</body>前的<script>里,保存打开浏览,点击按钮即可复制。

    new Clipboard('.btn'); 

    当然我们可以再进一步处理,比如当复制完成后,提示复制成功信息更友好些,只要执行以下代码即可:

    var clipboard = new Clipboard('.btn'); 
     
    clipboard.on('success', function(e) 
        var msg = e.trigger.getAttribute('aria-label'); 
        alert(msg); 
     
        e.clearSelection(); 
    }); 
  • 相关阅读:
    构建之法阅读笔记02
    学习进度条
    构建之法阅读笔记01
    c++ 与C的区别
    c++ 菜单动态效果
    c++ 方框中绘制菜单代码
    c++ 绘制方框
    c++ 条件编译
    c++ 预处理和多重替换
    c++ 文件共享打开
  • 原文地址:https://www.cnblogs.com/axl234/p/4997252.html
Copyright © 2011-2022 走看看