js实现复制功能

简介: js实现复制功能

一、具体场景

前端有时需要实现点击按钮复制的功能,这个时候就不能让用户去手动选择内容右键复制了。


二、实现方式

1. document.execCommand

(1)具体实现

复制时,先选中文本,然后调用document.execCommand(‘copy’),选中的文本就会进入剪贴板。这就需要借助输入框来实现对文本的选中。

具体案例:

  <button type="button" onclick="theCopy()">复制</button>
  <label style="display: block">
    <textarea id="textArea">哈哈哈哈哈哈哈哈哈111111</textarea>
  </label>
  function theCopy() {
    let textArea = document.getElementById('textArea')
    console.log(textArea);
    textArea.select()
    document.execCommand('copy')
  }

html加js这些就可以实现,但是我又发现另一种写法!!

如果内容不在输入框中,我们可以借助一个透明的输入框来实现

 

  <button type="button" onclick="theCopy()">复制</button>
  <p id="text">哈哈哈哈哈哈哈哈哈111111</p>
  <label style="display: block">
    <textarea id="textArea" style="opacity: 0;"></textarea>
  </label>
  function theCopy() {
    let textArea = document.getElementById('textArea')
    let text = document.getElementById('text')
    textArea.innerText = text.innerHTML
    console.log(textArea);
    textArea.select()
    document.execCommand('copy')
  }
相关文章
|
1月前
|
JavaScript 前端开发
JavaScript分页功能
JavaScript分页功能
|
19天前
|
JavaScript
js实现简洁实用的网页计算器功能源码
这是一款使用js实现简洁实用的网页计算器功能源码。可实现比较基本的加减乘除四则运算功能,界面简洁实用,是一款比较基本的js运算功能源码。该源码可兼容目前最新的各类主流浏览器。
24 2
|
1月前
|
人工智能 JavaScript 网络安全
ToB项目身份认证AD集成(三完):利用ldap.js实现与windows AD对接实现用户搜索、认证、密码修改等功能 - 以及针对中文转义问题的补丁方法
本文详细介绍了如何使用 `ldapjs` 库在 Node.js 中实现与 Windows AD 的交互,包括用户搜索、身份验证、密码修改和重置等功能。通过创建 `LdapService` 类,提供了与 AD 服务器通信的完整解决方案,同时解决了中文字段在 LDAP 操作中被转义的问题。
|
1月前
|
JavaScript 前端开发 API
|
1月前
|
JavaScript API UED
vue.js怎么实现全屏显示功能
【10月更文挑战第7天】
22 1
|
1月前
|
资源调度 JavaScript UED
如何使用Vue.js实现单页应用的路由功能
【10月更文挑战第1天】如何使用Vue.js实现单页应用的路由功能
|
1月前
|
JavaScript 搜索推荐
JS中的模糊查询功能
JS中的模糊查询功能
29 1
|
1月前
|
前端开发 JavaScript
使用 JavaScript 实现图片预览功能
使用 JavaScript 实现图片预览功能
30 0
|
1月前
|
JavaScript 安全 前端开发
js实现复制功能
js实现复制功能
19 0
用html+javascript打造公文一键排版系统14:为半角和全角字符相互转换功能增加英文字母、阿拉伯数字、标点符号、空格选项
用html+javascript打造公文一键排版系统14:为半角和全角字符相互转换功能增加英文字母、阿拉伯数字、标点符号、空格选项
下一篇
无影云桌面