js复制内容到剪切板

- 方法一 document.execCommand

非input / textarea中的复制

tryCopy() {let copyWrapper = document.querySelector(".copy-wrapper");// 创建select对象与range对象const selection = window.getSelection();const range = document.createRange();// 从当前selection对象中移除所有的range对象,// 取消所有的选择只 留下anchorNode 和focusNode属性并将其设置为null。// 这里没弄明白为什么需要先remove一下， 也没有太多资料查证 没有这句会复制失败if (selection.rangeCount > 0) selection.removeAllRanges();// 使 Range 包含某个节点的内容 使用这个 或者下面的selectNode都可以// range.selectNodeContents(tx)// 使 Range 包含某个节点及其内容range.selectNode(copyWrapper);// 向选区（Selection）中添加一个区域（Range）selection.addRange(range);// 已复制文字// console.log('selectedText', selection.toString())// 执行浏览器复制命令document.execCommand("copy");}

实现input / textarea中的复制
使用input / textarea进行复制操作这种方式更加简单因为二者有一个select() 函数更便捷的复制而不需要去创建select对象与range对象

      let input = document.createElement('input')input.setAttribute('readonly', 'readonly') // 防止手机上弹出软键盘input.setAttribute('value', txval) // txval 为所需复制的值 变量 或者 写死document.body.appendChild(input)input.select()document.execCommand('copy')document.body.removeChild(input)

但是此处注意当你的txval为多个值拼接并需要在剪贴板换行时此方法无法满足，要实现换行请使用textarea

- 方法二 navigator.clipboard

使用navigator.clipboard直接执行报错 DOMException: Document is not focused，需要用户主动触发，如click中执行

const copyText = async (text) => await navigator.clipboard.writeText(text)
document.querySelector('body').addEventListener('click', () => {copyText('复制文本内容');console.log('已复制')})

js复制内容到剪切板相关推荐

js 复制内容到剪切板
主要工具人: 老工具函数(已过时):document.execCommand('copy'); 作用:将当前页面选中的内容复制到剪切板. js思路: 创建input框节点. 把内容填充进input 把 ...
js禁止右键,禁止复制,复制内容到剪切板
有时候我们希望自己的网页源码不被查看,这时需要关掉鼠标的右击事件;有时候我们也希望禁止选择页面内容Ctrl+C复制. 1.禁止右键查看源码; <script> //设置右键事件 funct ...
JS复制图片到剪切板读取剪切板
JS复制图片到剪切板读取剪切板 navigator.clipboard实现复制图片图片写入剪切板 function handleCopyImg() { const canvas = documen ...
js 复制图片到剪切板和 js复制文本到剪切板
js 复制图片到剪切板 <a href="javascript:;" id="copyQrcode" data-base=""> ...
html 文本标签点击复制,点击复制-点击div或者p标签复制内容到剪切板
点击复制-点击div或者p标签复制内容到剪切板最近在做一个需求,就是需要点击div或者p标签需要复制其中的内容到剪切板中,可以快速的粘贴如图下所示: 1059788-201709041517163 ...
android 复制内容到剪切板方法
/*** 复制内容到剪切板** @param copyStr* @return*/ private boolean copyStr(String copyStr) {try {//获取剪贴板管理器Cl ...
Android复制内容到剪切板上
Android复制内容到剪切板上 fun Context.copyToClipboard(label: String, data: String) {getSystemService<Clipb ...
JavaScript复制内容到剪切板
复制内容到剪切板分两种情况,一种是从页面已有的可选元素中选中内容进行复制,一种是将Javascript代码中的字符串直接复制到剪切板. 复制页面元素选中内容 html代码: <input typ ...
js调用浏览器的复制功能复制内容到剪切板
js调用浏览器的复制功能: 浏览器自带复制粘贴功能,通过js调用浏览器的复制功能实现复制文本内容到剪切板浏览器复制命令:document.execCommand('Copy') 具体代码实现: // ...

js复制内容到剪切板

- 方法一 document.execCommand

- 方法二 navigator.clipboard

js复制内容到剪切板相关推荐

最新文章

热门文章