前端实现复制功能

前情

在前端开发需求中,为了方便用户使用,经常需要通过点击按钮复制指定的某一段内容。

相关API

Document.createRange()

返回一个Renge对象,通过Range对象可以选中文本。

// 选中id为test的元素的内容
const range = document.createRange();
range.selectNode(document.getElementById('test'));
const selection = window.getSelection();
if (selection.rangeCount > 0) selection.removeAllRanges();
selection.addRange(range);

Window.getSelection

返回一个 Selection对象,表示用户选择的文本范围或光标的当前位置。

const selection = window.getSelection();
const selectedText = selection.toString();  // 获取当前选中的文本
console.log(selectedText)

document.execCommand

document暴露 execCommand方法,该方法允许运行命令来操纵可编辑内容区域的元素

// const bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument);
const bool = document.execCommand('copy'); // 执行复制命令

参数说明

aCommandName 一个 String,命令的名称,如copy
aShowDefaultUI 一个 Boolean, 是否展示用户界面,一般为 false。Mozilla 没有实现
aValueArgument 一些命令(例如insertImage)需要额外的参数(insertImage需要提供插入image的url),默认为null

使用示例

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <input type="text" id="testInput" value="testInput">
  <div id="testDiv">testdiv</div>
  <button id="copyTestInput">复制输入框内容</button>
  <button id="copyTestDiv">复制div文本内容</button>
	<script>
		/*
		* 复制输入框内容
		*/
		function copyInput() {
		  var copyVal = document.querySelector("#testInput");
		  copyVal.select();
		  return document.execCommand('copy');
		}
		
		/*
		* 复制元素节点的内容
		*/
		function copyDiv() {
		  var range = document.createRange();
		  range.selectNode(document.querySelector('#testDiv'));
		  var selection = window.getSelection();
		  if (selection.rangeCount > 0) selection.removeAllRanges();
		  selection.addRange(range);
		  return document.execCommand('copy');
		}
		
		/*
		* 提示
		* param {Boolean} status
		*/
		function tips(status) {
		  if (status) {
		    alert('复制内容成功');
		  } else {
		    alert('复制失败,可选中内容手动复制');
		  }
		}
		
		document.querySelector('#copyTestInput').addEventListener('click', function() {
		  var isCopyed = copyInput();
		  tips(isCopyed);
		}, false);
		
		document.querySelector('#copyTestDiv').addEventListener('click', function() {
		  var isCopyed = copyDiv();
		  tips(isCopyed);
		}, false);
	</script>
</body>
</html>
  • 如果是输入类型元素:直接调用select方法选中内容,再启动copy命令
  • 如果是普通元素 :需要通过document.createRange选中节点内容,再通过window.getSelection选中元素内容,再启动copy命令

测试地址:https://jsbin.com/qobutuhidu/1/edit?html,js,output

注意

input输入类型的元素

  • 不能有disabled属性
  • width || height 不能为0
  • 不能有hidden、display:none属性

普通类型元素

  • width || height 不能为0
  • 不能有display:none属性
posted @ 2022-03-11 19:58  !win !  阅读(1107)  评论(0编辑  收藏  举报