我爱自学

 找回密码
 会员注册

QQ登录

只需一步,快速开始

JS实现网页复制内容时自动添加文字

网页复制内容时,粘贴的时候内容尾部,会自动化添加一部分文字。本文分享该效果实现方法
部分网页中复制内容时,粘贴的时候内容尾部,会自动化添加一部分内容。有的是版权信息,有的是来源网址。 在此分享实现方法: 实现代码如下:

是的你没有看错, 我还是在路边吃快餐, 在北京市的三里屯, 在上海市的外滩

// 监听整个网页的copy(复制)事件
  document.addEventListener('copy', function (event)
  {
      // clipboardData 对象是为通过编辑菜单、快捷菜单和快捷键执行的编辑操作所保留的,也就是你复制或者剪切内容
      let clipboardData = event.clipboardData || window.clipboardData;
      // 如果未复制或者未剪切,则return出去
      if (!clipboardData) { return; }
      // Selection 对象,表示用户选择的文本范围或光标的当前位置。
      // 声明一个变量接收 -- 用户输入的剪切或者复制的文本转化为字符串
      let text = window.getSelection().toString();
      if (text) {
      // 如果文本存在,首先取消文本的默认事件
      event.preventDefault();
      // 通过调用常clipboardData对象的 setData(format, data) 方法;来设置相关文本

      // setData(format, data);参数
      // format
      // 一个DOMString 表示要添加到 drag object的拖动数据的类型。
      // data
      // 一个 DOMString表示要添加到 drag object的数据。
      clipboardData.setData('text/plain', text + ' 转载来源:'+location.href);
      }
  });

以下是代码参数详解: element.addEventListener(type, handle, false);  

type: 事件触发类型,如click,keypress等等,下面我们详细的讲讲事件类型!!   

handle:事件处理函数,事件出发后,定义可能发生的变化!!   

false: 表示事件冒泡模型,一般来说都是false。

clipboardData clipboardData 属性保存了一个 DataTransfer 对象(用户剪切板的内容),这个对象可用于: format数据类型有:text/plain,text/uri-list。

data表示要添加到剪切板的数据。 描述哪些数据可以由 cut 和 copy 事件处理器放入剪切板,通常通过调用 setData(format,方法;设置拖放操作的数据(剪切板的数据)到指定的数据和类型。 获取由 paste 事件处理器拷贝进剪切板的数据,通常通过调用 getData(format) 方法 event.preventDefault() 方法阻止元素发生默认的行为。

例如: 当点击提交按钮时阻止对表单的提交,阻止以下 URL 的链接

内容参考:https://blog.csdn.net/dengyu810/article/details/104031454

点击阅读更多内容!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 会员注册

本版积分规则

手机版|小黑屋|我爱自学 ( 蜀ICP备19015358号-3 )

GMT+8, 2024-4-29 14:41 , Processed in 0.080122 second(s), 26 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

本站大部分教程是网站原创教程,一部分教程为我爱自学(http://www.5izixue.com)编辑收集整理。

如果您需要转载我爱自学网站教程,请注明“资料来源:我爱自学(5izixue)”字样并注明本站网址。

编辑收集整理的教程版权归原作者所有,本站只提供网友交流学习使用,请勿用于商业用途,如果该文章有任何侵犯您权益的地方,请联系我们(569705694@qq.com),我们将在第一时间进行处理!谢谢您的支持!

快速回复 返回顶部 返回列表