javascript中clipboardData对象用法详解

什么是clipboardData对象？

clipboardData对象是一个javascript对象，可以在复制和粘贴操作中来获取和操作剪切板中的数据。在javascript中，我们可以通过window对象的event属性来访问clipboardData对象。

clipboardData对象的属性和方法

clipboardData对象提供了一些有用的属性和方法，让我们可以在处理复制和粘贴操作时进行一些操作。

clipboardData对象的属性

• types — 获取剪切板中包含的不同格式的数据类型。

• files — 获取剪切板中的文件列表。一般用在拖拽上传的情况下。

• setData(format, data) — 往剪切板中设置格式化的数据。

• getData(format) — 获取剪切板中特定格式的数据。

• clearData(format) — 从剪切板中清除特定格式的数据。

clipboardData对象的方法

• setData(format, data) — 往剪切板中设置格式化数据。这个方法与属性中的setData()相同。

• getData(format) — 获取剪切板中特定格式的数据。这个方法与属性中的getData()相同。

• clearData(format) — 清除剪切板中特定格式的数据。这个方法与属性中的clearData()相同。

• setDragImage(image, x, y) — 自定义拖拽时的拖拽图像。一般用于拖拽文件时生成一个预览图像。

示例

下面是两个使用clipboardData对象的示例。

示例一

<p>请在下面的文本框中输入一些文本，然后点击复制按钮：</p>
<input type="text" id="input" />
<button onclick="copyText()">复制</button>

<script>
function copyText() {
  var input = document.getElementById("input");
  input.select();
  var successful = document.execCommand('copy');
  if (successful) {
    alert('文本已复制到剪切板！');
  } else {
    alert('复制失败！');
  }
}
</script>

上面的示例中，我们定义了一个输入框和一个复制按钮。在点击复制按钮时，我们首先获取输入框的值，然后将其选中，并使用document.execCommand('copy')方法将其复制到剪切板中。

示例二

<p>请从下面的列表中选择一些喜欢的颜色，然后点击复制按钮：</p>
<ul id="colorList">
  <li>红色</li>
  <li>绿色</li>
  <li>蓝色</li>
</ul>
<button onclick="copyColors()">复制</button>

<script>
function copyColors() {
  var colorList = document.getElementById("colorList").cloneNode(true);
  var successful;
  var clipboardData = event.clipboardData || window.clipboardData;
  clipboardData.setData('text/html', colorList.outerHTML);
  clipboardData.setData('text/plain', colorList.innerText);
  alert('颜色已复制到剪切板！');
}
</script>

上面的示例中，我们定义了一个颜色列表和一个复制按钮。在点击复制按钮时，我们首先复制列表的HTML代码和纯文本到剪切板中，使用了两次setData()方法。我们还使用了cloneNode方法来复制整个列表，以便将其添加到剪切板中。