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

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

CrazyPanda发表于:2024-08-13 18:05:37浏览:327次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】javascript中doucument对象的属性和方法有哪些
doucument对象的属性和方法有:body、cookie、domain、lastmodified、referrer、title、close()、open()、write()、getelementbyid()、normalize()等等。本教程操作环境:windows7系统、javascript1.8.5版、Dell G3电脑。Document 对象每个载入浏览器的 HTML 文档都会成为 Document 对象。Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
发表于:2024-04-14 浏览:276 TAG:
【JavaScript】5个最受欢迎的图像处理JS库
图像处理库 (IML) 用于对图像执行各种处理功能:你可以增加图像的亮度、添加饱和度或滤镜、裁剪和调整大小,以及更多有价值的功能,这些功能将帮助你完成几乎所有事情并将你的网络浏览器变成 Adob​​e Lightroom! 我们为每项重要的图像处理任务都提供了库,从简单的低级操作(例如滤镜、亮度和饱和度)到用于裁剪或图像合成的单一用途库。
发表于:2024-10-14 浏览:368 TAG: #javascript #图像 #sharp #cropper
【JavaScript】JS生成二维码-qrcode.js
二维码又称QRCode,是一个近几年来移动设备上很流行的一种编码方式它比传统的一维码(条形码)能存更多的信息,也能表示更多的数据类型。按照一定规律排列组成的几何图形构成,它巧妙地利用构成计算机内部逻辑...
发表于:2024-10-29 浏览:133 TAG: #二维码 #javascript
【Javascript】图片转base64的三种js方法
在前端,将图片转换为Base64编码是一种常见的做法,尤其是在不需要服务器端处理图片的情况下。Base64编码允许你将图片直接嵌入到HTML或CSS中,或者在JavaScript中作为字符串传输。以下...
发表于:2024-10-25 浏览:352 TAG: #图像 #base64
【JavaScript】JS四舍五入保留两位小数(二)
&nbsp; &nbsp; &nbsp; &nbsp; 在Web前端开发中,大多数的项目都是需要表单支持的,而在表单中有一种比较常见的功能是要你四舍五入保留两位小数,接下来将为大家详细的介绍一下保留两位小数的六种常用方法。1.&nbsp;toFixed()方法&nbsp; &nbsp; &nbsp; &nbsp; 介绍:这是JS自带的一个方法,可以四舍五入保留指定位数的小数,并且位数不够时可以自动补0&nbsp; &nbsp; &nbsp; &nbsp; 注意:保留两位小数,将数值类型的数据改变
发表于:2024-03-12 浏览:296 TAG:
【JavaScript】JS四舍五入保留两位小数(一)
1 、tofixed方法toFixed() 方法可把 Number 四舍五入为指定小数位数的数字。但是其四舍五入的规则与数学中的规则不同,使用的是银行家舍入规则。**银行家舍入:所谓银行家舍入法,其实质是一种四舍六入五取偶(又称四舍六入五留双)法。**具体规则如下:简单来说就是:四舍六入五考虑,五后非零就进一,五后为零看奇偶,五前为偶应舍去,五前为奇要进一。如下:&gt;&nbsp;(3.61).toFixed(1)&nbsp;&nbsp;&nbsp;&nbsp;//四舍 &#39;3.6&amp;#3
发表于:2024-03-12 浏览:311 TAG:
【JavaScript】JS复制剪切神器clipboard.js基本使用
clipboard.js是一款轻量级的实现复制文本到剪贴板功能的JavaScript插件。通过该插件可以将输入框,文本域,DIV元素中的文本等文本内容复制到剪贴板中 clipboard.js支持主流的浏览器:chrome 42+; Firefox 41+; IE 9+; opera 29+; Safari 10+;
发表于:2024-11-05 浏览:136 TAG: #javascript #前端 #clipboard
【JavaScript】如何使用 layui 实现自适应
layui 是一个轻量级的现代前端框架,它提供了丰富的 UI 组件和强大的响应式功能。要使用 layui 实现自适应布局,可以按照以下步骤进行:1. 引用 layui 框架复制以下代码并将其粘贴到你的 HTML 页面中:&lt;script&nbsp;src=&quot;path/to/layui.js&quot;&gt;&lt;/script&gt;2. 定义自适应布局的容器创建用于放置自适应内容的容器,并为其设置 layui-container 类:&lt;div&nbsp;class=&amp;q
发表于:2024-08-08 浏览:234 TAG:
【JavaScript】如何从 JavaScript 数组中删除重复元素?
在 JavaScript 中,有多种方法可以从数组中删除重复元素。在本文中,我们将探讨一些删除重复元素的顶级方法。使用filter()方法filter()方法使用传递的条件创建一个新的元素数组。这将仅包含作为此过滤器方法的一部分返回 true 的元素。因此,要实现删除重复元素,我们只需在 filter() 方法中添加条件即可,它会完成剩下的工作。#过滤器.js&lt;script&gt; &nbsp;&nbsp;&nbsp;var&nbsp;arr&nbsp;=&nbsp;[&quot;stev
发表于:2024-04-16 浏览:297 TAG:
【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 浏览:253 TAG: