前端复制粘贴navigator.clipboard失效的问题

由于地址访问的安全策略，不安全的http，不是https的地址在部署后，出现失效的问题，此时采用两种策略，分别对安全和不安全的采用两种粘贴方法，ts方法代码如下，此方法采用一篇博客所写

// TypeScrit
function copyToClipboard(textToCopy : string) {// navigator clipboard 需要https等安全上下文if (navigator.clipboard && window.isSecureContext) {// navigator clipboard 向剪贴板写文本return navigator.clipboard.writeText(textToCopy);} else {// 创建text arealet textArea = document.createElement("textarea");textArea.value = textToCopy;// 使text area不在viewport，同时设置不可见textArea.style.position = "absolute";textArea.style.opacity = '0';textArea.style.left = "-999999px";textArea.style.top = "-999999px";document.body.appendChild(textArea);textArea.focus();textArea.select();return new Promise((res, rej) => {// 执行复制命令并移除文本框document.execCommand('copy') ? res(null) : rej();textArea.remove();});}
}

前端复制粘贴navigator.clipboard失效的问题相关推荐

前端页面复制粘贴插件Clipboard的使用
clipboard.js是一款轻量级的实现复制文本到剪贴板功能的JavaScript插件.通过该插件可以将输入框,文本域,DIV元素中的文本等文本内容复制到剪贴板中 1.引入JS文件: <scr ...
前端开发过程中，经常遇到复制粘贴后自动空白一行，该如何解决这个问题哪？
在前端开发中,我们经常会遇到复制粘贴的需求,不论是从其他地方复制代码还是从网上找到的资料,都需要进行粘贴操作.但是,在进行粘贴操作时,很容易出现一个问题:自动添加空白行.这种情况下,如果不处理,就会影 ...
JavaScript 中的复制粘贴操作
在日常业务开发,比如复制后增加版权信息,点击复制,等场景中需要进行复制粘贴的操作,以下是几种实现方案. Clipboard API Clipboard API 提供了响应剪贴板命令(剪切.复制和粘贴) ...
textview 复制粘贴_Android TextView使用剪贴板复制粘贴
textview 复制粘贴 In this tutorial, we'll implement the copy-paste feature on a TextView in our Android ...
电脑突然无法复制粘贴Ctrl+C和Ctrl+V怎么回事？
很可能的原因之一是剪贴板被占用了.比如被有道词典的划词翻译占用. 如果是这种原因,把有道词典关闭即可. 其它原因请参考链接里的其它情况. 参考链接: Windows10的复制粘贴功能自动失效,该怎么解 ...
前端 JavaScript 复制粘贴的奥义——Clipboard 对象概述
前言作为一名资深搬砖工,你要问我用得最熟练的技能是什么,那我敢肯定且自豪的告诉你:是 Ctrl+C !是 Ctrl+V! 不信?你来看看我键盘上的 Ctrl.C 和 V 键,那油光发亮的包浆程度,不 ...
Navigator.clipboard剪切板 API 可用于实现剪切、复制、粘贴的功能。
剪贴板 Clipboard API 为 Navigator 接口添加了只读属性 clipboard,该属性返回一个可以读写剪切板内容的 Clipboard 对象. 在 Web 应用中,剪切板 API ...
php点击复制按钮到我的粘贴板,JS 实现点击按钮复制内容到粘贴板 clipboard
具体实现如下: 点击按钮复制内容到粘贴板 body { text-align: center; } #p1 { line-height: 150px; font-size: 40px; } #sour ...
一键复制文本实现（navigator.clipboard 和 execCommand(废弃)）
execCommand 已经被废弃了,所以尽量不要再使用了! 当然如果遇到execCommand失效(http情况下),暂时可以继续使用execCommand 推荐写法: // navigator c ...

前端复制粘贴navigator.clipboard失效的问题

前端复制粘贴navigator.clipboard失效的问题相关推荐

最新文章

热门文章