js实现复制功能

news/2024/7/19 13:05:46 标签: js, javascript, 前端

js_0">js实现复制功能:

1.原生写法

javascript"><!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
 
	<body>
		<div id="clickOnThe">uivydu</div>
	</body>
	<script>
		var clickOnThe = document.getElementById("clickOnThe");
			clickOnThe.onclick = function(){
				var _input = document.createElement("input");   // 直接构建input
					_input.value = clickOnThe.innerHTML;  // 设置内容
					document.body.appendChild(_input);    // 添加临时实例
					_input.select();   // 选择实例内容
					document.execCommand("Copy");   // 执行复制
					document.body.removeChild(_input); // 删除临时实例
			}
	</script>
</html>

2.封装

javascript">	<script>
		function encapsulationClick(content){
			var _input = document.createElement("input");   // 直接构建input
				_input.value = content;  // 设置内容
				document.body.appendChild(_input);    // 添加临时实例
				_input.select();   // 选择实例内容
				document.execCommand("Copy");   // 执行复制
				document.body.removeChild(_input); // 删除临时实例
		}
	</script>

使用:

javascript"><body>
	<div id="clickOnThe">点击复制</div>
</body>
<script>
	var clickOnThe = document.getElementById("clickOnThe");
		clickOnThe.onclick = function(){ //点击div触发函数
			var content = clickOnThe.innerHTML  //拿到div里面的内容
			encapsulationClick(content)		//调用封装方法,参数为div里面的内容
		}
</script>

亲自测试过的,代码有效,可直接粘贴或者复制


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

相关文章

vue公共方法怎么写

公共方法&#xff1a; 创建一个js存放公共方法&#xff1a;如在utils文件夹中创建一个timeCheck.js文件 js文件&#xff1a; export default {timeFormat(Time){var time new Date(Time);var year time.getFullYear();var month time.getMonth()1;var date time.getDate…

vue H5怎么修改标题

插件&#xff1a;npm install vue-wechat-title 入口文件引入&#xff1a; import vueWechatTitle from vue-wechat-title Vue.use(vueWechatTitle)路由文件&#xff1a; {path: /newDynamic, name: newDynamic, component:()> import(/view/newDynamic/newDynamic.vue),…

h5 怎么判断安卓,ios,微信浏览器,app环境

1. 判断是否是安卓还是ios var ua window.navigator.userAgent.toLowerCase(); if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {//ios环境 } else if (navigator.userAgent.match(/android/i)) {//安卓环境 }2.判断是微信浏览器、app进入的H5、手机自带的浏览器…

前端的数字转化为文字

数字转化为汉字 function convertCurrency(money) {//汉字的数字let cnNums new Array(零, 壹, 贰, 叁, 肆, 伍, 陆, 柒, 捌, 玖);//基本单位let cnIntRadice new Array(, 拾, 佰, 仟);//对应整数部分扩展单位let cnIntUnits new Array(, 万, 亿, 兆);//对应小数部分单位le…

js表格导出功能

文档导出功能–Dome <html><head><p style"font-size: 20px;color: red;">使用table标签方式将json导出xls文件</p><button onclicktableToExcel()>导出</button><input type"file" onchange"upload(0)"…

前后端配合续传

一、首先&#xff0c;为了引入文件对象&#xff0c;需要在H5页面上放置一个file类型的输入标签。 二、写一个简单的获取文件的方法 function fileInfo() { let fileObj document.getElementById(‘file’).files[0]; } 三、当我们获取到选择的文件对象之后&#xff0c;现…

vue兄弟传值:

vue兄弟传值&#xff1a; 假设&#xff1a;A与B为兄弟组件&#xff0c;此刻需要AB组件相互通信 步骤&#xff1a; 1.创建一个js文件&#xff1a; import Vue from Vue; export default new Vue;2.A组件&#xff1a;引入js <script> import bus from ./Vue //引入步骤…

SQL中limit的用法详解

limit子句用于限制查询结果返回的数量 用法&#xff1a; MySQL中这样用 【select * from limit tableName limit i,n 】参数&#xff1a; tableName : 为数据表&#xff1b; i : 为查询结果的索引值&#xff08;默认从0开始&#xff09;&#xff1b; n : 为查询结果返回的数…