JS实现一键复制的功能

news/2024/7/19 15:35:42 标签: js

参考WEB API接口
https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand

实现

document.execCommand(‘copy’)

语法

bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)

参数

aCommandName: 命令名字,copy,cut等
aShowDefaultUI:一个 Boolean, 是否展示用户界面,一般为 false。
aValueArgument:一些命令(例如insertImage)需要额外的参数(insertImage需要提供插入image的url),默认为null,一般不用。

要想copy内容,只能对可编辑区域(input,textarea)进行操作,所以实现需分为复制input内容与复制非input内容。

  • 复制input内容:代码以react+antd demo为例
// antd的input组件,class为ant-input
<Input style={{maxWidth: '270px', marginRight: '10px'}} onChange={(e)=>this.changeInput(e)} value={this.state.inputValue} />
<Button type="primary" onClick={()=>this.fzValue()}>点击一键复制内容</Button>
  fzValue() {
    console.log('点击了一键复制内容按钮')
    if (document.execCommand('copy')) {
      const input = document.getElementsByClassName('ant-input')
      input[0].select()
      document.execCommand('copy')
      alert('复制成功')
    }
  }
  • 复制非input内容,需创建input框,value为要复制的内容
<div className={'hello-div'}>Hello</div>
<Button type="primary" onClick={()=>this.fzValue()}>增加</Button>
  fzValue() {
    if (document.execCommand('copy')) {
      // 获取要复制的内容
      const value = document.getElementsByClassName('hello-div')[0].innerHTML
      // 创建input
      const input = document.createElement('input')
      // 将input的value设置为要复制的内容
      input.setAttribute('value', value);
      document.body.appendChild(input);
      input.select()
      document.execCommand('copy')
      // 销毁input
      input.remove()
    }
  }

http://www.niftyadmin.cn/n/875661.html

相关文章

vue脚手架vue-cli4.x安装vue3项目

关于旧版本 Vue CLI 的包名称由 vue-cli 改成了 vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)&#xff0c;需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。 Node 版本要求 Vue CLI 4.x 需要 Node.js v8.9 或更高版本 (推荐 v10 …

在vuecli4.x下,实现移动端适配

参照vant官网的Rem 布局适配 https://youzan.github.io/vant/#/zh-CN/advanced-usage postcss-pxtorem对移动端进行适配——可在编译过程中将px转化为rem lib-flexible——用于设置 rem 基准值 安装&#xff1a; npm install postcss postcss-pxtorem --save-dev npm i -S am…

vue3封装axios+Promise及代理配置

axios安装 npm install axios新建一个util文件夹&#xff0c;用于存放工具类 新建http.js&#xff0c;用于封装axios请求 其中实际开发中&#xff0c;baseURL是设置一个值以便代理的实现&#xff0c;但是需要根据开发/生产环境进行动态配置&#xff0c;防止生产环境打包后斜…

Linux查看日志常用操作整理

项目出现异常&#xff0c;要定位问题&#xff0c;查看日志是最常用的方法&#xff0c;在Linux系统查看一些日志文件&#xff0c;我们一般会使用tail、cat等命令&#xff0c;下面总结归纳一下这些常用的命令。 1、查看日志的方法 tail&#xff1a;tail命令应该是使用最多的&am…

css实现高斯模糊

想要实现的效果图 思路&#xff1a;图片与遮罩层相对定位&#xff0c;将遮罩层的背景图也设置为该图片&#xff0c;再利用高斯模糊&#xff0c;将背景图模糊处理&#xff0c;图片本身的层级高于遮罩层&#xff0c;达到这样的效果 <div class"box"><img s…

vue,env多环境切换

生产项目通常有多个环境&#xff0c;本地开发时就需要我们区分不同的环境进行联调或修复缺陷。可通过env进行不同环境的配置&#xff0c;并结合代理&#xff0c;达到本地开发&#xff0c;不同环境调用相应接口地址及资源的效果。 实现命令行&#xff1a; npm run serve --envf…

safari对z-index的兼容性

iOS的弹性滑动属性-webkit-overflow-scrolling: touch会导致z-index属性失效 可以用transform: translateZ来实现 z-index: 20; transform: translateZ(20px); // safari中z-index

ios Safari 无法禁止缩放的问题

通常&#xff0c;我们会通过meta标签来实现禁止页面缩放的效果 <meta id"meta-viewport" name"viewport"content"widthdevice-width,initial-scale1.0, maximum-scale1.0, minimum-scale1.0, viewport-fitcover">但在实际开发过程中&…