您现在的位置是:网站首页> 编程资料编程资料
JS实现一键复制_javascript技巧_
2023-05-24
362人已围观
简介 JS实现一键复制_javascript技巧_
原生js实现点击按钮复制文本,供大家参考,具体内容如下
最近遇到一个需求,需要点击按钮,复制 聊天记录的文本到剪切板
一、原理分析
浏览器提供了 copy 命令 ,可以复制选中的内容
document.execCommand("copy")如果是输入框,可以通过 select() 方法,选中输入框的文本,然后调用 copy 命令,将文本复制到剪切板
但是 select() 方法只对 和 有效,对于就不好使
最后我的解决方案是,在页面中添加一个 ,然后把它隐藏掉点击按钮的时候,先把 的 value 改为的 innerText,然后复制 中的内容
二、代码实现
我把你当兄弟你却想着复制我?
三、一键复制
分享一个自己工作中用到的一键复制方法
/** * 一键粘贴 * @param {String} id [需要粘贴的内容] * @param {String} attr [需要 copy 的属性,默认是 innerText,主要用途例如赋值 a 标签上的 href 链接] * * range + selection * * 1.创建一个 range * 2.把内容放入 range * 3.把 range 放入 selection * * 注意:参数 attr 不能是自定义属性 * 注意:对于 user-select: none 的元素无效 * 注意:当 id 为 false 且 attr 不会空,会直接复制 attr 的内容 */ copy (id, attr) { let target = null; if (attr) { target = document.createElement('div'); target.id = 'tempTarget'; target.style.opacity = '0'; if (id) { let curNode = document.querySelector('#' + id); target.innerText = curNode[attr]; } else { target.innerText = attr; } document.body.appendChild(target); } else { target = document.querySelector('#' + id); } try { let range = document.createRange(); range.selectNode(target); window.getSelection().removeAllRanges(); window.getSelection().addRange(range); document.execCommand('copy'); window.getSelection().removeAllRanges(); console.log('复制成功') } catch (e) { console.log('复制失败') } if (attr) { // remove temp target target.parentElement.removeChild(target); } }实现效果:


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
您可能感兴趣的文章:
相关内容
- 微信小程序自定义地址组件_javascript技巧_
- vue 为什么要封装全局组件引入_vue.js_
- Jquery实现下拉菜单案例_jquery_
- JS实现简单拖动模态框案例_javascript技巧_
- vue项目中一定会用到的性能优化技巧_vue.js_
- 在Vue3中使用BabylonJs开发 3D的初体验_vue.js_
- JavaScript+CSS实现模态框效果_javascript技巧_
- 微信小程序中如何实现动态改变SVG颜色和尺寸_javascript技巧_
- HTML+CSS+JavaScript实现简单日历效果_javascript技巧_
- JS 将伪数组转换成数组的实现示例_javascript技巧_
