首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

前端复制方案全覆盖!验证真机与生产代码完美一致!✨

主流复制方案 原生js API实现 document.execCommand 概述 document暴露 execCommand 方法 该方法允许运行命令来操纵可编辑内容区域的元素 我们在使用时,常常通过以一个不可见的...但是,如果需要复制的是非常大段的内容,则 execCommand() 方法可能会引起卡顿,因为 execCommand() 方法是一个同步方法,必须等复制操作结束,才能继续执行后面的代码。...该 API 被设计用来取代使用 document.execCommand() 的剪贴板访问方式。...优点 新的API,调用简单,兼容性问题少 基于Promise,不用像execCommand一样还得选中范围 看了一下兼容性也挺不错的 兼容性分析 兼容性比较低,在 can I use上查了一下 ios系统需要...重要事情说三遍 document.execCommand,clipboard.js均不支持异步数据的复制 document.execCommand,clipboard.js均不支持异步数据的复制 document.execCommand

52821

网页上的复制与剪切

IE 10及以上的版本修改了Document.execCommand()方法,增加了对剪切和复制的支持。Chrome从43版本开始也支持了这项特性。...Now that we've selected the anchor text, execute the copy command var successful = document.execCommand...在document.execCommand()方法后,我们可以通过调用window.getSelection().removeAllRanges()方法来移除选中。...如果你想检查拷贝是否成功,那么你可以checkdocument.execCommand();的返回值。如果返回false那么表示不支持拷贝或者不能使用(没有选中文本)。...我们将execCommand()放到try catch里面执行是为了确保一些极端情况下浏览器会抛出错误。 剪切命令可以在文本框中使用。你可以移除文本输入框中的文字并放到剪切版中使用。

1.5K20

几个神奇的Web Api,你(可能)不知道~

这几个api分别是: page lifecycle onlineState 利用deviceOrientation制作一个随着手机旋转的正方体 battery status custom event 利用execCommand...execCommand 执行命令 当将HTML文档切换成设计模式时,就会暴露出 execcommand 方法,然后我们可以通过使用这个方法来执行一些命令,比如复制,剪切,修改选中文字粗体、斜体、背景色、...这个命令了;// 执行复制命令,复制选中区域doc.execCommand('copy')// 剪切选中区域doc.execCommand('cut')// 全选doc.execCommand('selectAll...')// 将选中文字变成粗体,同时接下来输入的文字也会成为粗体,doc.execCommand('bold')// 将选中文字变成斜体,同时接下来输入的文字也会成为斜体,doc.execCommand(...'italic')// 设置背景颜色,,比如设置背景色为红色,就传入 'red'即可doc.execCommand('backColor',true,'red') 用处 我用这些命令简单的写了一个富文本的

51720
领券