js复制文本到剪切板中 支持换行

news/2024/7/7 12:55:40
/**
 * 复制文本到剪切板中
 *
 * @export
 * @param {*} value 需要复制的文本
 * @param {*} cb 复制成功后的回调
 */
export function copy(value, cb) {
  // 动态创建 textarea 标签
  const textarea = document.createElement('textarea')
  // 将该 textarea 设为 readonly 防止 iOS 下自动唤起键盘,同时将 textarea 移出可视区域
  textarea.readOnly = 'readonly'
  textarea.style.position = 'absolute'
  textarea.style.left = '-9999px'
  // 将要 copy 的值赋给 textarea 标签的 value 属性  
  // 网上有些例子是赋值给innerText,这样也会赋值成功,但是识别不了\r\n的换行符,赋值给value属性就可以
  textarea.value = value
  // 将 textarea 插入到 body 中
  document.body.appendChild(textarea)
  // 选中值并复制
  textarea.select()
  textarea.setSelectionRange(0, textarea.value.length)
  document.execCommand('Copy')
  document.body.removeChild(textarea)
  if (cb && Object.prototype.toString.call(cb) === '[object Function]') {
    cb()
  }
}
import { copy } from '@/xxx/xxx'

let value = '嘿嘿\r\n我换行了'
copy(value, () => {
	console.log('复制成功')
})

 


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

相关文章

颜色模型和颜色应用---HLS颜色模型

2019独角兽企业重金招聘Python工程师标准>>> 转载于:https://my.oschina.net/liyangke/blog/2877018

一键部署Docker CE(CentOS 7)

一键部署脚本 #!/bin/sh # author ling# 定义显示颜色 RED\e[1;91m GREEN\e[1;92m WITE\e[1;97m NC\e[0m# centos7环境中安装docker function install_docker_in_contos7() {echo "Install docker in centos7!"echo "Remove old docker!"yum remove docke…

react —— 复制定制化带有标题的二维码

1. 生成二维码直接借助qrcode这个npm库即可生成二维码,但接到的需求要求是在鼠标点击的附近展示出二维码,点击弹窗里面的复制按钮即可赋值带标题的二维码图片到剪切板,实现效果如下图: 主要实现要点: 1.利用qrcode 生成…

Kubelet bootstrap认证配置步骤

kubelet 授权 kube-apiserver 的一些操作 exec run logs 等 RBAC 只需创建一次就可以 kubectl create clusterrolebinding kube-apiserver:kubelet-apis --clusterrolesystem:kubelet-api-admin --user kubernetes 创建 bootstrap kubeconfig 文件 注意: token 生效时间为 1day…

vue——移动端在线预览pdf并能缩放(pdfh5)

最近接了一个需求需要在移动端预览pdf,并切要能缩放,百度发现大多推荐vue-pdf,但是vue-pdf这个包,安装之后运行报错,解决之后的实现效果不符合需求需要,而且,实现缩放功能的时候,整个…

Docker网络实现容器互联

一、新建docker网络命令 docker network create -d bridge 网络名称 二、docker网络实现容器互联实践 步骤1、在/data/dockerfile目录下,vim Dockerfile添加如下内容: FROM ubuntu:14.04 RUN apt-get install -y ping RUN apt-get update &&…

vue-pdf安装之后,运行报错can not resolve ‘pdfjs-dist/es5/web/pdf_viewer‘

安装方式&#xff1a; npm i --save vue-pdf ​​​​​​​1. 使用组件&#xff1a; <PreViewPdf ref"PreViewPdf"></PreViewPdf>this.$refs.PreViewPdf.openPdf(item.oss_url) 2. 项目抛出如下错误&#xff1a; 通过查阅vue-pdf的github项目的issue发…

leetCode 14 Longest Common Prefix

leetcode.windliang.cc/ 第一时间发布 题目描述&#xff08;简单难度&#xff09; 解法一 垂直比较 我们把所有字符串垂直排列&#xff0c;然后一列一列的比较&#xff0c;直到某一个字符串到达结尾或者该列字符不完全相同。 下边看一下我的代码&#xff0c;看起来比较多 //这个…