首页
学习
活动
专区
工具
TVP
发布

原生JS在网页上复制的所有文字后面自动加上一段版权声明

body> // 监听整个网页的copy(复制)事件 document.addEventListener('copy', function (event) { // clipboardData...对象是为通过编辑菜单、快捷菜单和快捷键执行的编辑操作所保留的,也就是你复制或者剪切内容 let clipboardData = event.clipboardData || window.clipboardData...clipboardData) { return; } // Selection 对象,表示用户选择的文本范围或光标的当前位置。...对象的 setData(format, data) 方法;来设置相关文本 // setData(format, data);参数 // format // 一个DOMString...clipboardData clipboardData 属性保存了一个 DataTransfer 对象(用户剪切板的内容),这个对象可用于:   format数据类型有:text/plain,text/

1.2K20
您找到你想要的搜索结果了吗?
是的
没有找到

表单文本框的使用(二) 输入过滤(合成事件)

我们能实现向输入框中输入字符,依靠的是键盘事件,所以可以通过添加键盘事件,然后根据事件对象的信息来判断符不符合条件,不符合条件,就通过event.preventDefault阻止默认事件,即阻止输入。...可以通过event对象上的clipboardData对象来获取,为防止未经授权访问剪切板,只能在剪切板事件期间访问clipboardData对象。...clipboardData对象上有3个方法:getDate、setData、clearData。...第一个参数是格式,第二个参数是复制的内容 e.clipboardData.setData('text/plain', '复制了假数据') // 屏蔽掉默认事件,实现复制假数据...合成事件就是用来检测和控制这种输入,输入的字符在事件对象的data中。

1.3K20

造一个 copy-to-clipboard 轮子

alert('复制失败') } if (mark) { document.body.removeChild(mark) } } 这里用到 Selection 和 Range 两个对象...一个 Selection 可以有多个 Range 对象。 上面逻辑很简单,创建 span 元素,从 textContent 加入复制文本。这里有人就问了:为啥不用 innerText 呢?...做兼容,这里有个知识点是在 IE 下,window 会有一个 clipboardData,我们可以把要复制的内容存到 window.clipboardData。...e.clipboardData) { // 只有 IE 11 里 e.clipboardData 一直为 undefined // 这里 format 要转为 IE 11...它的所有操作都是异步的,返回 Promise 对象,不会造成页面卡顿。而且,它可以将任意内容(比如图片)放入剪贴板。 不过,目前还是 document.execCommand 使用的比较广泛。

80930

详解浏览器中的粘贴事件 paste onpaste 事件

console.log(even) }) 控制台打印出来是这样的 处理函数的参数是even,even的数据结构如上图 明眼人一眼就能看出那个数据自己有用,其他几个属性稀松平常,唯独clipboardData...这个属性比较 特殊,这是一个DataTransfer类型的数据.估计我们需要的粘贴对象就存储在这个clipboardData这个属性里面 果不其然,查阅资料后我得知, DataTransfer这个数据类型的相关资料...使用getData()方法我们可以获取自己想要的粘贴元数据,如果粘贴对象是文本,html的话可以这样获取参数,但对于文件,比如一个截图后,那么这是就要使用even.clipboardData.files...那就需要使用另外一个类了,FileReader 根据这个DataTransfer类的解释我们不难得出,这个东西主要是用于drop drag两个事件里多用 以下这个是文本粘贴的数据 可以使用even.clipboardData.getDate...) let file = even.clipboardData.files[0] let fileReader = new FileReader();

1.7K10

剪贴板操作 Clipboard API 教程

四、Clipboard 对象 Clipboard 对象提供了四个方法,用来读写剪贴板。它们都是异步方法,返回 Promise 对象。...该方法返回一个 Promise 对象。一旦该对象的状态变为 resolved,就可以获得一个数组,每个数组成员都是 ClipboardItem 对象的实例。...('text/plain', selection.toString().toUpperCase()); event.preventDefault(); }); 上面示例中,事件对象clipboardData...它是一个对象,有以下属性和方法。 Event.clipboardData.setData(type, data):修改剪贴板数据,需要指定数据类型。...Event.clipboardData.items:一个类似数组的对象,包含了所有剪贴项,不过通常只有一个剪贴项。 下面的示例是拦截用户的复制操作,将指定内容放入剪贴板。

2K10
领券