WEBAPI-clipboard

优质

小牛编辑

127浏览

2023-12-01

IE

IE浏览器支持直接读写剪切板内容：

window.clipboardData.clearData();  
window.clipboardData.setData('Text', 'abcd');
window.clipboardData.getData('Text');

但是这种方式不安全，很容易泄露用户的隐私，所以现在浏览器如chrome都不支持这种方式了。

1.IE下，直接支持一个window.clipboardData对象，通过这个对象可以访问到粘贴板中内容。

2.chrome和firefox，在oncopy/onpaste/oncut事件对象event中有一个clipboardData对象，而在IE的事件中是没有这个对象的

Chrome

copy

// Overwrite what is being copied to the clipboard.
document.addEventListener('copy', function(e) {
  // e.clipboardData is initially empty, but we can set it to the
  // data that we want copied onto the clipboard.
  e.clipboardData.setData('text/plain', 'Hello, world!');
  e.clipboardData.setData('text/html', '<b>Hello, world!</b>');

  // This is necessary to prevent the current document selection from
  // being written to the clipboard.
  e.preventDefault();
});

cut

// Overwrite what is copied to the clipboard.
document.addEventListener('cut', function(e) {
  // e.clipboardData is initially empty, but we can set it to the
  // data that we want copied onto the clipboard as part of the cut.
  // Write the data that we want copied onto the clipboard.
  e.clipboardData.setData('text/plain', 'Hello, world!');
  e.clipboardData.setData('text/html', '<b>Hello, world!</b>');

  // Since we will be canceling the cut operation, we need to manually
  // update the document to remove the currently selected text.
  deleteCurrentDocumentSelection();

  // This is necessary to prevent the document selection from being
  // written to the clipboard.
  e.preventDefault();
});

paste

// Overwrite what is being pasted onto the clipboard.
document.addEventListener('paste', function(e) {
  // e.clipboardData contains the data that is about to be pasted.
  if (e.clipboardData.types.indexOf('text/html') > -1) {
    var oldData = e.clipboardData.getData('text/html');
    var newData = '<b>Ha Ha!</b> ' + oldData;

    // Since we are canceling the paste operation, we need to manually
    // paste the data into the document.
    pasteClipboardData(newData);

    // This is necessary to prevent the default paste action.
    e.preventDefault();
  }
});

To trigger

execCommand('cut' / 'copy' / 'paste')

clipboardData.types

Mandatory data types

text/plain
text/uri-list
text/csv
text/css
text/html
application/xhtml+xml
image/png
image/jpg, image/jpeg
image/gif
image/svg+xml
application/xml, text/xml
application/javascript
application/json
application/octet-stream

Asynchronous Clipboard API

read()

const items = await navigator.clipboard.read();
const textBlob = await items[0].getType("text/plain");
const text = await (new Response(textBlob)).text();

readText()

navigator.clipboard.readText().then(function(data) {
  console.log("Your string: ", data);
});

write(data)

var data = [new ClipboardItem({ "text/plain": new Blob(["Text data"], { type: "text/plain" }) })];
navigator.clipboard.write(data).then(function() {
  console.log("Copied to clipboard successfully!");
}, function() {
  console.error("Unable to write to clipboard. :-(");
});

writeText(data)

await navigator.clipboard.writeText("Howdy, partner!");

常见用法

1：禁止复制

<script>
    // 网页禁止复制 body oncopy事件中 设置 return false；
    // oncopy、onpase事件： 复制、粘贴事件，可用于多数控件
    // div 没有oncopy事件，  body 与 文本框有这个事件
    function forbidCopy() {
        window.alert("网页的内容，只能看，不能动！");
        return false;
    }
</script>
<body  oncopy="forbidCopy();" >
    输入密码：
    <input type="text" oncopy="window.alert('禁止复制!');return false;" />
    再输入一边密码：
    <input type="text" onpaste="window.alert('禁止粘贴!');return false;" />
</body>

2：点击复制指定标记中的内容

<script type="text/javascript">
    function copyText(obj) { 
        var rng = document.body.createTextRange(); 
        rng.moveToElementText(obj); 
        rng.scrollIntoView(); 
        rng.select(); 
        rng.execCommand("Copy"); 
        rng.collapse(false); 
        alert("复制成功!"); 
    } 
    function oCopy(id){
        var obj=document.getElementById(id);
        obj.select();
        js=obj.createTextRange();
        js.execCommand("Copy");
        alert("代码已经被成功复制！");
    }
</script>


<span id="tbid">http://pmp.www.jb51.net</span>   
<a href="#" onclick="copyText(document.all.tbid)">点击复制</a>
<span id="tbid2">http://www.www.jb51.net/pmp</span>   
<a href="#" onclick="oCopy(tbid2)">点击复制</a>

3：复制内容后附加信息

<script>
    function SetCopyContent() {
        window.event.returnValue = false;
        var content = window.clipboardData.getData("Text") + "/r/n";
        content += "本资源来自简书 " + this.location.href;
        window.clipboardData.setData('Text', content);
        alert("复制成功，请粘贴到你的QQ/MSN上推荐给你的好友");
    }
</script>
<body  oncopy="SetCopyContent();" >
</body>