js点击复制文本

js如何实现点击复制功能，js点击复制文本

千次阅读

2020-07-18 10:44:43

微信小程序自带复制功能，那么网页js如何实现复制功能呢？

nput和textarea等文本输入框可以实现选中复制，针对div，p等标签不可以，那么我们需要新建一个文本框标签，不能给display:none; 我们需要怼他进行一个定位，让透明看不见找不到，点击复制，将需要复制的内容赋值给文本框，接着对文本框进行全选，在进行复制操作即可，代码如下：

html部分：

<p id="content">敏感行业列表内涉及到的行业和业务一定无法申请，外显号码申请受政策影响较大</p>
<textarea id="text" style="position: fixed;top: 10000px;left: 10000px;opacity: 0;"></textarea>
<button id="CopyBtn">复制</button>

js部分：

<script>
	var content = document.getElementById("content").innerText;
	var text = document.getElementById("text");
	var CopyBtn = document.getElementById("CopyBtn");
	CopyBtn.onclick = function(){
		// 将需要复制的内容赋值给文本框
		text.value = content;
		// 选中文本框的内容
		text.select();
		// 对选中的内容进行复制
		document.execCommand("copy");
	}
</script>

更多相关内容

js实现点击按钮复制文本功能
2020-12-09 17:36:08

最近遇到一个需求，需要点击按钮，复制 <p> 标签中的文本到剪切板之前做过复制输入框的内容，原以为差不多，结果发现根本行不通尝试了各种办法，最后使了个障眼法，实现了下面的效果一、原理分析浏览器提供了 ...

收起
H5 js点击按钮复制文本到粘贴板
2021-01-22 10:41:16

本文实例为大家分享了js点击按钮复制文本到粘贴板的具体代码，供大家参考，具体内容如下准备：先去下载clipboard.js: 官网移动端效果如下：应用：html+js 代码如下： <!DOCTYPE html> <...

收起
JS实现移动端点击按钮复制文本内容
2020-10-16 15:23:39

本文通过实例代码给大家介绍了移动端点击按钮复制文本内容，代码简单易懂，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下

收起
js点击复制剪贴板鼠标点击文字弹出复制链接按钮
2019-10-30 22:38:39

js点击复制剪贴板鼠标点击文字弹出复制链接按钮 js点击复制剪贴板鼠标点击文字弹出复制链接按钮

收起
JavaScript实现点击按钮复制指定区域文本(推荐)
2020-11-30 04:18:12

html5的webAPI接口可以很轻松的使用短短的几行代码就实现点击按钮复制区域文本的功能，不需要依赖flash。代码如下： /* 创建range对象 */ const range = document.createRange(); range.selectNode(element); // ...

收起
JS简单实现点击复制链接的方法
2020-10-21 19:43:45

主要介绍了JS简单实现点击复制链接的方法,提供了2种简单的复制链接操作方法供大家选择使用,需要的朋友可以参考下

收起

使用JS实现点击复制文本

2021-01-18 11:43:08

点击按钮实现复制文本内容功能 <input class="layui-input" id="copyvalue"> <button type='button' class='layui-btn' onclick=copyfun>点击复制</button> //复制input框的内容 function ...

点击按钮实现复制文本内容功能

<input class="layui-input" id="copyvalue">
    <button type='button' class='layui-btn' onclick=copyfun>点击复制</button>
    //复制input框的内容
    function copyfun(){
      var e = document.getElementById("copyvalue");
      e.select(); // 选择对象
      document.execCommand("Copy"); // 执行浏览器复制命令
      alert("复制成功");
    }

进阶：不依靠输入框输入，隐藏input，点击复制自定义的内容

注意：这里input 不能hidden，也不能 display: none,否则复制不成功

<input class="layui-input" id="copyvalue" style="opacity: 0;position: absolute;">
    <button type='button' class='layui-btn' onclick=copyfun>点击复制</button>
    //复制input框的内容
    function copyfun(){
      let text='要赋值的内容'
      $('#copyvalue').val(text)
      var e = document.getElementById("copyvalue");
      e.select(); // 选择对象
      document.execCommand("Copy"); // 执行浏览器复制命令
      alert("复制成功");
    }

改进方法
这样可以不用在html里写 input，灵感来源于创建 a 标签下载链接

 function copyfun(){
 	  var copyipt = document.createElement("input");
      var text = "需要复制的内容";
      copyipt.setAttribute("value", text);
      document.body.appendChild(copyipt);
      copyipt.select();
      document.execCommand("copy");
	  document.body.removeChild(copyipt);
}

收起

展开全文

JS点击按钮复制文本
2021-12-24 10:24:42
在PC端上通过点击按钮复制对应文本的业务场景，不经常有，但是让我碰见了，也了解了下实现方法。 1、通过createElement生成一个input输入框，并将其透明度设为0，使得用户无感知； 2、将需要复制的内容赋值到输入框...
在PC端上通过点击按钮复制对应文本的业务场景，不经常有，但是让我碰见了，也了解了下实现方法。

1、通过createElement生成一个input输入框，并将其透明度设为0，使得用户无感知；

2、将需要复制的内容赋值到输入框内，（一定要将输入框添加到页面body中）才能使用select函数选中。

3、通过document.execCommand(“copy”)执行浏览器复制命令，就能将对应文本进行复制了
```
function handleCopy(text) {
  const input = document.createElement('input')
  input.style.cssText = 'opacity: 0;';
  input.type = 'text';
  input.value = text; // 修改文本框的内容
  document.body.appendChild(input)
  input.select(); // 选中文本
  document.execCommand("copy"); // 执行浏览器复制命令
  this.$message({message: '复制成功',type: 'success'})
},
```
收起
展开全文
前端 html
原生js实现点击复制文本
2021-05-18 14:27:47
select()方法用于选择该元素中的文本。 document.execCommand('copy')执行浏览器复制命令 document.execCommand()详细介绍语法bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument) 返回值...
效果如下

核心代码
1. select()方法用于选择该元素中的文本。
2. document.execCommand('copy')执行浏览器复制命令
document.execCommand()详细介绍
语法

bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)

返回值

一个 Boolean ，如果是 false 则表示操作不被支持或未被启用。
注意：在调用一个命令前，不要尝试使用返回值去校验浏览器的兼容性

参数

aCommandName
一个 DOMString ，命令的名称。可用命令列表请参阅命令。
aShowDefaultUI
一个 Boolean，是否展示用户界面，一般为 false。Mozilla 没有实现。
aValueArgument
一些命令（例如insertImage）需要额外的参数（insertImage需要提供插入image的url），默认为null。

命令

backColor
修改文档的背景颜色。在styleWithCss模式下，则只影响容器元素的背景颜色。这需要一个 <color> 类型的字符串值作为参数传入。注意，IE浏览器用这个设置文字的背景颜色。
bold
开启或关闭选中文字或插入点的粗体字效果。IE浏览器使用 <strong>标签，而不是 <b>标签。
ClearAuthenticationCache
清除缓存中的所有身份验证凭据。
contentReadOnly
通过传入一个布尔类型的参数来使能文档内容的可编辑性。(IE浏览器不支持)
copy
拷贝当前选中内容到剪贴板。启用这个功能的条件因浏览器不同而不同，而且不同时期，其启用条件也不尽相同。使用之前请检查浏览器兼容表，以确定是否可用。
createLink
将选中内容创建为一个锚链接。这个命令需要一个 hrefURI字符串作为参数值传入。URI必须包含至少一个字符，例如一个空格。（浏览器会创建一个空链接）
cut
剪贴当前选中的文字并复制到剪贴板。启用这个功能的条件因浏览器不同而不同，而且不同时期，其启用条件也不尽相同。使用之前请检查浏览器兼容表，以确定是否可用。
decreaseFontSize
给选中文字加上 <small> 标签，或在选中点插入该标签。(IE浏览器不支持)
defaultParagraphSeparator
更改在可编辑文本区域中创建新段落时使用的段落分隔符。有关更多详细信息，请参阅标记生成的差异。
delete
删除选中部分.
enableAbsolutePositionEditor
启用或禁用允许移动绝对定位元素的抓取器。Firefox 63 Beta/Dev Edition 默认禁用此功能( bug 1449564)。
enableInlineTableEditing
启用或禁用表格行和列插入和删除控件。(IE浏览器不支持)
enableObjectResizing
启用或禁用图像和其他对象的大小可调整大小手柄。(IE浏览器不支持)
fontName
在插入点或者选中文字部分修改字体名称. 需要提供一个字体名称字符串 (例如："Arial")作为参数。
fontSize
在插入点或者选中文字部分修改字体大小. 需要提供一个HTML字体尺寸 (1-7) 作为参数。
foreColor
在插入点或者选中文字部分修改字体颜色. 需要提供一个颜色值字符串作为参数。
formatBlock
添加一个HTML块式标签在包含当前选择的行, 如果已经存在了，更换包含该行的块元素 (在 Firefox中, BLOCKQUOTE 是一个例外 -它将包含任何包含块元素). 需要提供一个标签名称字符串作为参数。几乎所有的块样式标签都可以使用(例如. "H1", "P", "DL", "BLOCKQUOTE"). (IE浏览器仅仅支持标题标签 H1 - H6, ADDRESS, 和 PRE,使用时还必须包含标签分隔符 < >, 例如 "<H1>".)
forwardDelete
删除光标所在位置的字符。和按下删除键一样。
heading
添加一个标题标签在光标处或者所选文字上。需要提供标签名称字符串作为参数 (例如. "H1", "H6"). (IE 和 Safari不支持)
hiliteColor
更改选择或插入点的背景颜色。需要一个颜色值字符串作为值参数传递。 UseCSS 必须开启此功能。(IE浏览器不支持)
increaseFontSize
在选择或插入点周围添加一个BIG标签。(IE浏览器不支持)
indent
缩进选择或插入点所在的行，在 Firefox 中, 如果选择多行，但是这些行存在不同级别的缩进, 只有缩进最少的行被缩进。
insertBrOnReturn
控制当按下Enter键时，是插入 br 标签还是把当前块元素变成两个。(IE浏览器不支持)
insertHorizontalRule
在插入点插入一个水平线（删除选中的部分）
insertHTML
在插入点插入一个HTML字符串（删除选中的部分）。需要一个个HTML字符串作为参数。(IE浏览器不支持)
insertImage
在插入点插入一张图片（删除选中的部分）。需要一个 URL 字符串作为参数。这个 URL 图片地址至少包含一个字符。空白字符也可以（IE会创建一个链接其值为null）
insertOrderedList
在插入点或者选中文字上创建一个有序列表
insertUnorderedList
在插入点或者选中文字上创建一个无序列表。
insertParagraph
在选择或当前行周围插入一个段落。(IE会在插入点插入一个段落并删除选中的部分.)
insertText
在光标插入位置插入文本内容或者覆盖所选的文本内容。
italic
在光标插入点开启或关闭斜体字。 (Internet Explorer 使用 EM 标签，而不是 I )
justifyCenter
对光标插入位置或者所选内容进行文字居中。
justifyFull
对光标插入位置或者所选内容进行文本对齐。
justifyLeft
对光标插入位置或者所选内容进行左对齐。
justifyRight
对光标插入位置或者所选内容进行右对齐。
outdent
对光标插入行或者所选行内容减少缩进量。
paste
在光标位置粘贴剪贴板的内容，如果有被选中的内容，会被替换。剪贴板功能必须在 user.js 配置文件中启用。参阅 [1].
redo
重做被撤销的操作。
removeFormat
对所选内容去除所有格式
selectAll
选中编辑区里的全部内容。
strikeThrough
在光标插入点开启或关闭删除线。
subscript
在光标插入点开启或关闭下角标。
superscript
在光标插入点开启或关闭上角标。
underline
在光标插入点开启或关闭下划线。
undo
撤销最近执行的命令。
unlink
去除所选的锚链接的<a>标签
useCSS
切换使用 HTML tags 还是 CSS 来生成标记. 要求一个布尔值 true/false 作为参数。注: 这个属性是逻辑上的倒退 (例如. use false to use CSS, true to use HTML).(IE不支持)
该属性已经废弃，使用 styleWithCSS 代替。
styleWithCSS
用这个取代 useCSS 命令。参数如预期的那样工作, i.e. true modifies/generates 风格的标记属性, false 生成格式化元素。

demo
```
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<style type="text/css">
			.wrapper {
				position: relative;
			}

			#input {
				position: absolute;
				top: 0;
				left: 0;
				opacity: 0;
				z-index: -10;
			} 
		</style>
	</head>
	<body>
		<div class="wrapper">
			<p id="text" onclick="copyText()">复制的一段文字</p>
			<input id="input" value="躲起来的文本框"/>
			
			<button onclick="copyText()">copy</button>
		</div>
		<script type="text/javascript">
			function copyText() {
				var text = document.getElementById("text").innerText;
				var input = document.getElementById("input");
				input.value = text; // 修改文本框的内容
				input.select(); // 选中文本
				document.execCommand("copy"); // 执行浏览器复制命令
				alert("复制成功");
			}
		</script>
	</body>
</html>
```
收起
展开全文
原生
js实现点击复制文本
2021-06-26 12:40:27

页面上实现一键复制功能，由于...使用方法：//加载js(可下载本地加载)//使用方式一：这里是复制的文本内容666复制$(document).ready(function(){varclipboard=newClipboard('#copy_btn');clipboard.on('success',...

收起
js点击复制文本 - 案例篇
2019-09-27 14:43:04

文章目录js点击复制文本 ：代码+效果图效果图 · 示下：html 代码如下：注意代码：附：[javascript监听键盘事件 - 如表单enter回车提交](https://blog.csdn.net/qq_35393869/article/details/79854995) js点击复制...

收起
js实现点击后将文字或图片复制到剪贴板的方法
2020-10-25 14:35:03

主要介绍了js实现点击后将文字或图片复制到剪贴板的方法,功能非常实用,需要的朋友可以参考下

收起
js实现点击复制当前文本到剪贴板功能（兼容所有浏览器）
2020-10-23 02:52:33

主要介绍了js实现点击复制当前文本到剪贴板功能，兼容所有浏览器，感兴趣的小伙伴们可以参考一下

收起
clipboard.js 点击复制指定文本源码
2019-05-07 09:00:08

点击复制按钮复制指定的文本，兼容微信和支付宝网页，部分pc浏览器不兼容。

收起
js 点击按钮复制文本方法
2020-02-20 16:19:34

<span class="copyMa" @click="copy()">点击复制</span> copy(){ let random = this.$refs.randomCodeRef.innerHTML; const input = document.createElement('input'); ...

收起

vue复制
js 点击复制文本
2021-05-11 14:07:58

js 点击复制文本 $('.copyBttn').click(function () { copy('linkUrls','已复制') // linkUrls 为要复制元素的ID }) function copy(id, text) { const range = document.createRange(); range.selectNode...

收起
js 实现点击复制文本内容
2019-10-02 22:57:35

js 实现点击复制文本内容 <table> <tr><td>姓名：<span onclick="copyContent(this);" title="点击复制">张三</span></td></tr> <tr><td>姓名：...

收起
JS点击复制文字
2020-04-11 15:38:22

JS点击复制文字 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS点击复制文字Demo</title> <script> function copyText(message) { ...

收起
js+html5实现复制文字按钮
2020-10-19 13:04:05

主要为大家详细介绍了js+html5实现复制文字按钮，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

收起
H5基于clipboard.js点击复制
2021-08-26 17:18:08

H5基于clipboard.js点击复制

收起
JS 点击复制文本&图片
2020-03-04 19:13:15

以标签内容复制，显示 html 标签，..."的也可以复制成功 $('button').on('click', function (event) { copy($('#copy').html()); alert('复制成功'); }) function copy(str) { var save = function (e) { ...

收起

jquery html5
Vue实现点击按钮复制文本内容的例子
2020-12-13 04:36:10

点击复制功能主要通过 clipboard.js 来实现在vue中使用clipboard.js 时候发现一个问题，就是如果不是input或者button 按钮的话，则复制不成功，使用步骤如下： 1、引入clipboard.js，方法如下：第一种直接npm安装...

收起
移动端js复制功能，点击复制按钮，就可以复制指定的内容
2018-06-21 16:24:44

适用于移动端js实现复制功能，点击按钮，提示“复制成功”，经常用来复制订单编号和快递单号等，避免用户手动输入的麻烦

收起

js实现点击按钮复制文本功能

H5 js点击按钮复制文本到粘贴板

JS实现移动端点击按钮复制文本内容

js点击复制剪贴板鼠标点击文字弹出复制链接按钮

JavaScript实现点击按钮复制指定区域文本(推荐)

JS简单实现点击复制链接的方法

使用JS实现点击复制文本

JS点击按钮复制文本

原生js实现点击复制文本

效果如下

核心代码

document.execCommand()详细介绍

语法

返回值

参数

命令

demo

js实现点击复制文本

js点击复制文本 - 案例篇

js实现点击后将文字或图片复制到剪贴板的方法

js实现点击复制当前文本到剪贴板功能（兼容所有浏览器）

clipboard.js 点击复制指定文本源码

js 点击按钮复制文本方法

js 点击复制文本

js 实现点击复制文本内容

JS点击复制文字

js+html5实现复制文字按钮

H5基于clipboard.js点击复制

JS 点击复制文本&图片

Vue实现点击按钮复制文本内容的例子

移动端js复制功能，点击复制按钮，就可以复制指定的内容

js点击复制文本