专栏首页前端小作坊网页上的复制与剪切

网页上的复制与剪切

网页上的复制与剪切

这篇文章翻译自HTML5ROCKS的Cut and Copy Commands

IE 10及以上的版本修改了Document.execCommand()方法,增加了对剪切和复制的支持。Chrome从43版本开始也支持了这项特性。

当选中了浏览器中的任意文本,只要执行这个方法就可以剪切或拷贝这段文字。有了这个API后,选中一段文字并拷贝会变的非常简单。

这个API和Selection API一起使用时将会变的特别有用。你可以决定哪些文本被复制到剪切版。之后我们会详细阐述。

一个简单的例子

让我们来增加一个按钮,点击这个按钮会拷贝一个email地址到用户的剪切版。

我们在网页里面添加一个email地址和一个按钮,点击按钮会拷贝email地址:

<p>Email me at <a class="js-emaillink" href="mailto:matt@example.co.uk">matt@example.co.uk</a></p>
<p><button class="js-emailcopybtn"><img src="./images/copy-icon.png" /></button></p>

接下来在Javascript中,我们增加一个click事件监听器到按钮上。在事件监听器中我们通过class js-emaillink选中email地址,然后执行拷贝命令,然后用户的剪切版里面就会有email地址了。然后我们取消选中email地址,这样用户就不会见到文本被选中。

var copyEmailBtn = document.querySelector('.js-emailcopybtn');
copyEmailBtn.addEventListener('click', function(event) {
    // Select the email link anchor text
    var emailLink = document.querySelector('.js-emaillink');
    var range = document.createRange();
    range.selectNode(emailLink);
    window.getSelection().addRange(range);

    try {
        // Now that we've selected the anchor text, execute the copy command
        var successful = document.execCommand('copy');
        var msg = successful ? 'successful' : 'unsuccessful';
        console.log('Copy email command was ' + msg);
    } catch(err) {
        console.log('Oops, unable to copy');
    }

    // Remove the selections - NOTE: Should use
    // removeRange(range) when it is supported
    window.getSelection().removeAllRanges();
});

如上代码中使用了Selection APIwindow.getSelection()方法选中链接的文本。在document.execCommand()方法后,我们可以通过调用window.getSelection().removeAllRanges()方法来移除选中。如果你想检查拷贝是否成功,那么你可以checkdocument.execCommand();的返回值。如果返回false那么表示不支持拷贝或者不能使用(没有选中文本)。我们将execCommand()放到try catch里面执行是为了确保一些极端情况下浏览器会抛出错误

剪切命令可以在文本框中使用。你可以移除文本输入框中的文字并放到剪切版中使用。

在HTML中添加一个textarea和一个按钮:

<p><textarea class="js-cuttextarea">Hello I'm some text</textarea></p>
<p><button class="js-textareacutbtn" disable>Cut Textarea</button></p>

我们可以这么写js:

var cutTextareaBtn = document.querySelector('.js-textareacutbtn');
cutTextareaBtn.addEventListener('click', function(event) {
    var cutTextarea = document.querySelector('.js-cuttextarea');
    cutTextarea.select();

    try {
        var successful = document.execCommand('cut');
        var msg = successful ? 'successful' : 'unsuccessful';
        console.log('Cutting text command was ' + msg);
    } catch(err) {
        console.log('Oops, unable to cut');
    }
});

queryCommandSupported和queryCommandEnabled

在调用 document.execCommand() 之前你应该确认这个API是否被所在浏览器支持。这时候你可以用 document.queryCommandSupported() 方法来确认是否支持。在上面的例子中,我们可以在浏览器不支持时将按钮设置为disabled。具体代码如下:

copyEmailBtn.disabled = !document.queryCommandSupported('copy');

document.queryCommandSupported())和document.queryCommandEnabled())的区别是:前者检测浏览器是否支持剪切或拷贝,后者检测是否有选中的文本用于剪切或拷贝。这在让用户选中文本的情况(不用Selection API)下比较有用。如果没有选中的文本,你可以显示一个消息给用户,这样更加友好~

浏览器支持情况

IE 10+、Chrome 43+和Opera 29+ 已经支持了这些命令。

Firefox虽然已经支持了这些命令,但是需要修改下首选项(具体看这里。如果没有修改首选项,那么Firefox会抛出一个错误。

Safari目前不支持这些命令。

已知问题

直接用js代码调用 queryCommandSupported() 会一定会返回false,除非将其放在用户操作的回调函数中执行。这导致了你不能在浏览器不支持时禁用按钮。

在devtools中调用 queryCommandSupported() 一定会返回false。

目前剪切命令只在你用js选中文本时起作用。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 原型链上的DOM Attributes

    Chrome开发小组最近发表声明他们正在將DOM properties移动到原型链中。这个更新将会在Chrome 43(2015年4月发布beta版本)中实现。...

    mmzhou
  • GA源代码里的小技巧之preview和prerender

    Safari浏览器有个Top site功能,它会展示最长访问的几个页面的截图。示例如下:

    mmzhou
  • CSS3着重符及其fallback

    在中文里面,我们一般会在文字下方加上圆形符号。在日语中会在文字上方加上小顿号。在CSS3中如下属性可以控制着重符号:

    mmzhou
  • 打造前端 Deepin Linux 工作环境——安装 nodejs 环境,git 版本管理

    打造前端 Deepin Linux 工作环境——安装 nodejs 环境,git 版本管理 好的,前面我们已经对系统进行了基本的设置,然后我们从这一篇博文开始,...

    FungLeo
  • 深入解析CSS样式优先级

    作为前端多多少少都会对CSS样式的权重有一定的了解。最常用的方法就是对不同的选择器分配不同的权重比,常见的就是

    踏浪
  • 单例模式三种模式,饿汉(饥汉)、饱汉(懒汉)、双重锁模式

    今天看某培训机构提供面试题中设计模式部分,对饱汉和饿汉比较感兴趣,就搜了一下,然后误人子弟,然后就觉得有必要记录一下

    瑾诺学长
  • tkinter -- Event(1)

    分别测试鼠标的 Relase 事件,只有当鼠标被 Relase 后移动才回产生 Relase 事件

    py3study
  • HDFS Federation在美团点评的应用与改进

    背景 2015年10月,经过一段时间的优化与改进,美团点评HDFS集群稳定性和性能有显著提升,保证了业务数据存储量和计算量爆发式增长下的存储服务质量;然而,随着...

    美团技术团队
  • co 源码精读

    co 是著名的 TJ 于 2013 年推出的一个利用 ES6 的 Generator 函数来解决异步操作的开源项目,也是后来 JavaScript 异步操作的终...

    逆葵
  • PPT设计,必须知道的素材站!

    假期也结束了,又回到了工作岗位上,今天我将PPT设计所用的素材网站,进行了汇集,写成文章方便大家在制作PPT的时候用到,并且我也做了一个导航站点,加班狗导航:p...

    PPT爱好者

扫码关注云+社区

领取腾讯云代金券