您的当前位置:首页>全部文章>文章详情

【JavaScript】js复制内容到剪切板

CrazyPanda发表于:2024-08-13 18:05:37浏览:336次TAG: #javascript

复制内容到剪切板分两种情况,一种是从页面已有的可选元素中选中内容进行复制,一种是将Javascript代码中的字符串直接复制到剪切板。

一 、复制页面元素选中内容

html

<input type="textarea" id="txt" />
<button onclick="copy()">复制</button>

js

function copy() {      
    var element = document.getElementById("txt");
  element.select();
  element.setSelectionRange(0, element.value.length);
  document.execCommand('copy');
  alert("已复制到剪切板");
}

二、 复制字符串到剪切板

复制字符串采用临时添加一个元素,模拟选中内容进行选中的方式进行复制,复制后移除临时添加的元素即可。

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;
}

 

猜你喜欢

【JavaScript】JS中referer的使用
HTTP请求中有一个referer的报文头,用来指明当前流量的来源参考页。例如在www.sina.com.cn/sports/上点击一个链接到达cctv.com首页,那么就referrer就是www.sina.com.cn/sports/了。在Javascript中,我们可以通过document.referrer来获取同样的信息。通过这个信息,我们就可以知道访客是从什么渠道来到当前页面的。这对于Web Analytics来说,是非常重要的,这可以告诉我们不同渠道带来的流量的分布情况,还有用户搜索
发表于:2024-04-24 浏览:357 TAG:
【JavaScript】JS时间和时间戳互转
在JavaScript中,获取当前时间的时间戳(秒值)可以使用 Date.now() 方法,而将时间戳转换为日期格式可以使用 Date 对象。获取当前时间戳(秒值):let&nbsp;timestampSeconds&nbsp;=&nbsp;Date.now()&nbsp;/&nbsp;1000; console.log(timestampSeconds);&nbsp;//&nbsp;输出的是以秒为单位的时间戳将时间戳转换为日期:let&nbsp;timestampSeconds&nbsp;=&amp;
发表于:2024-08-14 浏览:264 TAG:
【JavaScript】JS四舍五入保留两位小数(二)
&nbsp; &nbsp; &nbsp; &nbsp; 在Web前端开发中,大多数的项目都是需要表单支持的,而在表单中有一种比较常见的功能是要你四舍五入保留两位小数,接下来将为大家详细的介绍一下保留两位小数的六种常用方法。1.&nbsp;toFixed()方法&nbsp; &nbsp; &nbsp; &nbsp; 介绍:这是JS自带的一个方法,可以四舍五入保留指定位数的小数,并且位数不够时可以自动补0&nbsp; &nbsp; &nbsp; &nbsp; 注意:保留两位小数,将数值类型的数据改变
发表于:2024-03-12 浏览:306 TAG:
【Javascript】localStorage和sessionStorage的使用
一、什么是localStorage、sessionStorage在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k),localStorage中一般浏览器支持的是5M大小,这个在不同的浏览器中localStorage会有所不同。&nbsp;二、localStorage的优势与局限localStorage的优势1、localStorage拓展了cookie的4K限制2
发表于:2024-03-27 浏览:339 TAG: #javascript #localstorage #sessionstorage
【JavaScript】js复制内容到剪切板
复制内容到剪切板分两种情况,一种是从页面已有的可选元素中选中内容进行复制,一种是将Javascript代码中的字符串直接复制到剪切板。一 、复制页面元素选中内容html&lt;input&nbsp;type=&quot;textarea&quot;&nbsp;id=&quot;txt&quot;&nbsp;/&gt; &lt;button&nbsp;onclick=&quot;copy()&quot;&gt;复制&lt;/button&gt;jsfunction&nbsp;copy()&amp;nbs
发表于:2024-08-13 浏览:338 TAG: #javascript
【JavaScript】js获取父级元素
在JavaScript中,我们可以使用以下方法来获取元素的父级:&nbsp;&nbsp;1、 使用parentNode属性:可以通过访问元素的parentNode属性来获取其直接父级元素。例如:var&nbsp;element&nbsp;=&nbsp;document.getElementById(&#39;myElement&#39;); var&nbsp;parentElement&nbsp;=&nbsp;element.parentNode;2、 使用parentElement属性:与pa
发表于:2024-05-11 浏览:262 TAG:
【JavaScript】5个最受欢迎的图像处理JS库
图像处理库 (IML) 用于对图像执行各种处理功能:你可以增加图像的亮度、添加饱和度或滤镜、裁剪和调整大小,以及更多有价值的功能,这些功能将帮助你完成几乎所有事情并将你的网络浏览器变成 Adob​​e Lightroom! 我们为每项重要的图像处理任务都提供了库,从简单的低级操作(例如滤镜、亮度和饱和度)到用于裁剪或图像合成的单一用途库。
发表于:2024-10-14 浏览:373 TAG: #javascript #图像 #sharp #cropper
【JavaScript】JS获取时间戳秒值
方法一:使用JavaScript的Date对象的getTime()方法来获取当前时间的毫秒值,然后将其除以1000得到秒值。var&nbsp;timestamp&nbsp;=&nbsp;Math.floor(new&nbsp;Date().getTime()&nbsp;/&nbsp;1000);方法二:使用JavaScript的Date对象的getTime()方法获取当前的毫秒值,然后使用Math.floor()函数向下取整得到秒值。var&nbsp;timestamp&nbsp;=&nbsp;
发表于:2024-08-14 浏览:262 TAG:
【JavaScript】字母大小写转换的JS方法
1. toUpperCase() 方法:将字符串中的所有字母转换为大写。例如,`"hello world".toUpperCase()` 将返回 `"HELLO WORLD"`。
发表于:2024-11-16 浏览:232 TAG: #javascript
【JavaScript】纯CSS蜂巢式图片画廊效果
这是一款纯CSS蜂巢式图片画廊效果。该CSS蜂巢式图片画廊通过CSS网格布局,将图片以蜂巢的六边形进行布局,非常炫酷。
发表于:2024-11-06 浏览:245 TAG: #CSS #图像