前端實現複製功能

！win ！發表於2022-03-11
前端

前情

在前端開發需求中，為了方便使用者使用，經常需要通過點選按鈕複製指定的某一段內容。

相關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屬性

相關文章