前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >使用 JS 剪贴板 API

使用 JS 剪贴板 API

作者头像
西南_张家辉
发布2021-02-02 10:04:05
4.3K0
发布2021-02-02 10:04:05
举报
文章被收录于专栏:张家辉的树屋

使用 JS 剪贴板 API

现在的状况

  • 一般情况下我们会在网页上使用大量的3复制粘贴的操作。
  • 但是也可以看到在 360文库中的禁止复制粘贴或者知乎的那样复制粘贴的时候会自动带有一段文字的版权声明。

Clipboard API(剪贴板 API)

image
image
  • 其次研读一下 MDN 的文档
    • 属性
    • ClipboardEvent.clipboardData
      • 是一个 DataTransfer 对象,它包含了由用户发起的 cut 、 copy 和 paste 动作所影响的带有 MIME 类型的数据。

这是一个实验中的功能 此功能某些浏览器尚在开发中,请参考浏览器兼容性表(caniuse.com/#feat=clipb…)格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

禁止复制粘贴

代码语言:javascript
复制
<div oncopy="alert('复制被阻止!'); return false;">试着复制这句话!div>
 
<h3>Logh3>

<textarea rows="15" cols="80" id="log" readonly="true">textarea>

复制代码

复制粘贴添加版权说明

  • 你也可以直接看看 codepen 的代码
代码语言:javascript
复制
<p>这是一篇学术文章:p>
<p>未经作者允许请勿他用p>
<textarea id="input" placeholder="复制粘贴这里来">textarea>


//javascript
<script>
    (function(){
    //获取复制事件
    document.addEventListener('copy', function (event) {
        //获取复制的数据
        var clipboardData = event.clipboardData || window.clipboardData;
        if (!clipboardData) { return; }
        
        //返回一个  Selection 对象,表示用户选择的文本范围或光标的当前位置
        // 获取当前用户光标选择的文本
        var text = window.getSelection().toString();
        if (text) {
            event.preventDefault();
            
            //重新设置粘贴板的文本
            clipboardData.setData('text/plain', text + '\n\n版权所有,商用必究');
          }
      });
    })()
script>
复制代码

JS改变剪切板内容

  • 当我们拖拽文本进入输入框的时候,有时候需要的文字格式有所变化,我们可以直接进行处理
  • 比如 138-1231-123
  • 复制粘贴后就 1381231123
  • 使用 drop 来实现
代码语言:javascript
复制
input.addEventListener('drop', function (event) {
    // 获取拖拽文本内容
    var text = event.dataTransfer.getData('text');
    if (this.value == '' && text.match(/\d/g) && text.match(/\d/g).length == 11) {
        event.preventDefault();
        input.value = text.replace(/\D/g, '');
        input.select();
    }
});

复制代码

引用

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 现在的状况
  • Clipboard API(剪贴板 API)
  • 禁止复制粘贴
  • 复制粘贴添加版权说明
  • JS改变剪切板内容
  • 引用
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档