js实现剪切、复制、粘贴——clipBoard.js

摘要:

  最近项目上要实现一个点击按钮复制链接的功能,刚开始查找了一些资料,找了几款插件,ZeroClipboard是通过flash实现的复制功能,随着越来越多的提议废除flash,于是就想能不能通过js来实现复制剪切呢?

地址:https://github.com/baixuexiyang/clipBoard.js

方法:

复制

var copy = new clipBoard(document.getElementById(‘data‘), {
    beforeCopy: function() {

    },
    copy: function() {
        return document.getElementById(‘data‘).value;
    },
    afterCopy: function() {

    }
});

剪切

var cut = new clipBoard(document.getElementById(‘data‘), {
    beforeCut: function() {

    },
    Cut: function() {
        return document.getElementById(‘data‘).value;
    },
    afterCut: function() {

    }
});

粘贴

var paste = new clipBoard(document.getElementById(‘data‘), {
    beforePaste: function() {

    },
    paste: function() {
        return document.getElementById(‘data‘).value;
    },
    afterPaste: function() {

    }
});
时间: 2024-10-27 12:35:10

js实现剪切、复制、粘贴——clipBoard.js的相关文章

JS下的复制粘贴

IE : 1 <input type="text" id="Settext" /> 2 3 <input type="button" onclick="copyToClipboard()" /> body内 1 function copyToClipboard() { 2 3 if (document.all) { //判断IE 4 5 var text = document.all("Set

js/jquery常用方法------复制粘贴至剪切板

1.添加引用 <script src="/XX/XX/clipboard.min.js"></script> (自己在网上下载) 2.复制按钮 <button class="btn btn-info" type="button" id="btnCopy" title="复制" data-clipboard-action="copy" data-clipboa

flutter textfield 长按输入框出现【剪切/复制/粘贴】的菜单如何设置中文?

当 TextField 设置 enableInteractiveSelection 属性后长按会出现菜单,默认为英文,可通过设置 Flutter 国际化来处理: 在 pubspec.yaml 中集成 flutter_localizations: dependencies: flutter: sdk: flutter flutter_localizations: sdk: flutter 在 MaterialApp 中设置本地化代理和支持的语言类型: return MaterialApp( loc

js实现复制隐藏域的内容 —— clipboard.js

起初是使用浏览器提供了 copy 命令 . document.execCommand("copy") 如果是输入框,可以通过 select() 方法,选中输入框的文本,然后调用  copy 命令,将文本复制到剪切板.但是 select() 方法只对 <input> 和 <textarea> 有效,对于 <p> 就不好用了 function copyUrl() { $("#copyinput").select(); // 选择对象

js 禁止剪切、复制、粘贴的文本框代码

有的网站中不允许用户复制.粘贴.剪切文本框中的内容的,是怎么实现的呢?看看下面的代码就知道了. <input id=”username” oncut=”return false” oncopy=”return false” oncontextmenu=”return false” onpaste=”return false” name=”username” value=”zzsky” type=”text” /> js 禁止剪切.复制.粘贴的文本框代码

clipboard.js在剪切中的使用

目前只是对文字的复制. 下面的代码解释: 1.html 需要添加data-clipboard="copy"和data-clipboard-target="对象选择器"的属性. 其中data-clipboard-target表示复制的目标,用选择的形式表示,包括类选择器,id选择器,元素选择器等. <section> <p id="qq1">123456789</p> <input type="b

记录使用clipboard.js实现点击复制链接到剪切板的历程

记录使用clipboard.js实现点击复制链接到剪切板的历程 前几天接到一个任务,让实现当用户在首页点击按钮(说是按钮,只是外观是按钮,其实是一个a标签)时弹出弹窗告诉用户已经复制了活动链接,同时将链接复制到用户的剪切板中. 听起来贼简单的功能,分任务的时候甚至有人说就1,2行代码就搞定了.于是这简单的任务就给了我(菜鸟实习生  =-=),我真是信了你的邪~~!. 在我做的时候,才发现,听起来挺简单的任务,但是如果要实现对不同浏览器兼容,其实并不简单. 列举一下我找到的各种实现方法吧: 1.d

Clipboard.js : 移动端浏览器实现网页内容复制

.bl { padding: 5px 10px; border-left: 3px solid #009a61; background: #f6f6f6; color: #555; font-size: 1em } .bottom-line { border-bottom: 2px solid #009a61; padding-bottom: 8px } 最近在项目中遇到这样一个需求: 点击按钮,将指定的URL复制到剪贴板,然后用户可以粘贴到浏览器(Safari为主)自行打开. 方案一:zero

JS 点击复制Copy插件--Zero Clipboard

写博客就是一周工作中遇到哪些问题,一个好处就是可以进行一个总结,另外一个好处就是下次遇到同样的问题即使那你记不住,也可以翻看你的博客解决了.同样也可以帮到别人遇到与你一样问题的人.或者别人有比你更好的解决办法,可以一起讨论,分析出更好的解决方法.所以这是个好习惯.既然是好习惯,那就得坚持. 但是想写好一篇博客好像不是那么容易的,因为你得有问题,不然你写什么,手放在键盘上不知道敲啥.或者是你自己主动学习了,对你的学习进行了总结.然后你得有得写. 这周公司同事分享的<贝叶斯方法>对我的感触挺大的.