首页 > 其他分享 >js复制文本到剪切板

js复制文本到剪切板

时间:2023-07-10 09:24:12浏览次数:51  
标签:style document text js element 剪切板 var 文本

参考:https://blog.csdn.net/evanyanglibo/article/details/127851585

//复制文本
function copyText(text) {
  var element = createElement(text);
  element.select();
  element.setSelectionRange(0, element.value.length);
  document.execCommand('copy');
  element.remove();
  alert("已复制到剪切板");
}

//创建临时的输入框元素
function createElement(text) {
  var isRTL = document.documentElement.getAttribute('dir') === 'rtl';
  var element = document.createElement('textarea');
  // 防止在ios中产生缩放效果
  element.style.fontSize = '12pt';
  // 重置盒模型
  element.style.border = '0';
  element.style.padding = '0';
  element.style.margin = '0';
  // 将元素移到屏幕外
  element.style.position = 'absolute';
  element.style[isRTL ? 'right' : 'left'] = '-9999px';
  // 移动元素到页面底部
  let yPosition = window.pageYOffset || document.documentElement.scrollTop;
  element.style.top = `${yPosition}px`;
  //设置元素只读
  element.setAttribute('readonly', '');
  element.value = text;
  document.body.appendChild(element);
  return element;
}

 

标签:style,document,text,js,element,剪切板,var,文本
From: https://www.cnblogs.com/jqynr/p/17539920.html

相关文章

  • 黑马程序员前端JS基础视频课程(pink老师)
    共计76个视频,20小时时长课程分为三大块1.JavaScript基础2.webAPIs3.JS进阶之前看过pink老师的css+html讲的那是扛扛,刚刚在其他社区找到这套课程特意分享给大家! download:黑马程序员前端JS基础视频课程(pink老师) ......
  • React18+TS+NestJS+GraphQL 全栈开发在线教育平台
    第1章这里,将带你进行一次全面,高效的进阶试看3节‖36分钟学习本课程你能得到什么?不论是技术提升,职场晋升,面试跳槽,你都会有所收获。第2章了解用户需求,懂得如何做项目试看4节‖54分钟本章让大家了解一个企业级项目的用户需求是什么,有哪几种角色,是如何使用我们的产品的,知道......
  • Cesium中的QuadtreeTile.js类
    /***Asingletileina{@linkQuadtreePrimitive}.**@aliasQuadtreeTile*@constructor*@private**@param{Number}options.levelThelevelofthetileinthequadtree.*@param{Number}options.xTheXcoordinateofthetileinthequadtree......
  • Python调用 JS -PyExecJS, Python 调用 JS -js2py
    Python调用JS-PyExecJS日常Web端爬虫过程中,经常会遇到参数被加密的场景,因此,我们需要分析网页源代码通过调式,一层层剥离出关键的JS代码,使用Python去执行这段代码,得出参数加密前后的Python实现//计算两个数的和functionadd(num1,num2){returnnum1+num2;}......
  • JS 中单例模式的具体实现细节和实践
    通用的创建单例模式的方法:1创建实例对象的职责和管理单例的职责分别放置于两个方法中。2两个方法可以互相独立而互不影响。3惰性加载单例模式,等到用到的时候才加载。1letcreateSingle=function(fn){2letresult;3returnfunction(){4//app......
  • 4. Q_ 设置_p_的_font_size_10rem_,当用户重置或拖曳浏览器窗口时,文本大小是
    Q:设置p的font-size:10rem,当用户重置或拖曳浏览器窗口时,文本大小是否会也随着变化?A:不会。rem是以html根元素中font-size的大小为基准的相对度量单位,文本的大小不会随着窗口的大小改变而改变。......
  • 8. Q_ 如下代码中文本_Sausage_的颜色是_
    Q:如下代码中文本“Sausage”的颜色是?<ulclass="shopping-list"id="awesome"><li><span>Milk</span></li><liclass="favorite"id="must-buy"><spanclass="highlight">Saus......
  • 13. Q_ 如下代码中文本_Sausage_的颜色是_
    Q:如下代码中文本“Sausage”的颜色是?<ulclass="shopping-list"id="awesome"><li><span>Milk</span></li><liclass="favorite"id="must-buy"><spanclass="highlight">Saus......
  • 11. Q_ 如下代码中文本_Sausage_的颜色是_
    Q:如下代码中文本“Sausage”的颜色是?<ulclass="shopping-list"id="awesome"><li><span>Milk</span></li><liclass="favorite"id="must-buy"><spanclass="highlight">Saus......
  • 12. Q_ 如下代码中文本_Sausage_的颜色是_
    Q:如下代码中文本“Sausage”的颜色是?<ulclass="shopping-list"id="awesome"><li><span>Milk</span></li><liclass="favorite"id="must-buy"><spanclass="highlight">Saus......